Why does bootstrap4 work partially and heavily load a WordPress site?

Question

css

Hello. I decided to feel the VP. I took a ready-made template and tweaked it a little to my taste. And now, I ran into a problem that the site began to load very slowly. Moreover, bootstrap's classes work only on the main page, and are not used on WooCommerce pages.

I connected the framework like this:

From the admin panel to the header file, before the closing head tag, I added

<link rel="stylesheet" href="wp-content/themes/blossom-fashion/css/bootstrap.min.css">

And after the opening body tag

<script src="wp-content/themes/blossom-fashion/js/bootstrap.min.js"></script>

Where did I screw up?

P.S. (I don't know for sure, it doesn't work only on WooCommerce pages or everywhere except for index.php, there just aren't any others)

Answer 1

Include scripts correctly like css and like js

Answer 2

Answered the 1st question, I will answer on the brakes ...
Because the bootstrap contains the maximum in itself. And you use 5% of your strength.
Hence the conclusion - collect it for your project separately - only the necessary components and states.
But why did you decide to cheat and choose him? On native css it is written quickly and performance problems are many times less - I would say at least.
They will choose bootstrap, elementor and then they are surprised that this site is slow. From a cannon to sparrows is called it.