Back in the early instances of bootstrap they used to provide a build system for the individual components. It seems that these days its all or nothing, or use some kind of build tool to include the bits that you want.

How hard is it to manually extract components from bootstrap?

Lets start with an un-minimised/squished version of the bootstrap css. 

https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css 

Here we have Bootstrap 4.5.2 which is 194kb uncompressed before we even add any javascript. This is a fairly heavy overhead to begin with, but it makes things a bit easier when starting with a site. Dont have to worry about grids or mobile, or anuthing like that. Anyway. 

The bits that i most commonly use from bootstrap are:

• top nav
• buttons
• button dropdowns
• form spacing
• some of the margin classes like mb-3 
• grid
• card (i love this one, for adding some nice formatting to content easily)
• fonts?

Lets see how hard they are to extract and if they work alone. 

I think the easiest way to see what is used is to add them all to one page, and hope i dont forget any of them. 

Here is the component testing demo

As soon as you start adding things like the nav dropdown it seems we also need to find the bits of js that are related to that item. So lets also grab the bootstrap js. 

OK so now if we load the demo above in chrome we can load our browser dev tools and check the coverage to see what bits of the bootstrap code are actually being used here.

Here is how we load the coverage in chrome dev tools

1. Open the demo link in a new browser tab.
2. Press F12 to open dev tools
3. Press ctrl + shift + p (this will open a search)
4. Type in coverage and select Show Coverage
5. This will open a new coverage draw
6. Then we can reload the demo and it should show the coverage of the loaded libraries

This just gives us an idea of how much wasted code there is in these libraries. But does not actually help to extract it. 

To extract the css, you can also use chrome dev tools. 

Select the element and then right click it, and copy the styles. 

This just gives us the css for that one item, so each sub element will also need to be copied like this. Which is a lot of effort! :P But it can be done for less complex components. 

How to copy styles of an element:

This gives the combined styles but no class selector. So add this to a class. navbar. You can see in the css below, the new navbar class with all of the copied elements.