Using the Installation

Another way I work with Bootstrap is to download and install the files.

Simple Install

Download

• css/bootstrap.min.css &&
  css/bootstrap.min.css.map
• js/bootstrap.bundle.min.js &&
  js/bootstrap.bundle.min.js.map
• Popper.js

When you dowload the document from the website you get a ton of files which require some explanation. I'm working with a pre-release version of bootstrap so these might look at bit different.

├── css
│   ├── bootstrap-grid.css
│   ├── bootstrap-grid.css.map
│   ├── bootstrap-grid.min.css
│   ├── bootstrap-grid.min.css.map
│   ├── bootstrap-grid.rtl.css
│   ├── bootstrap-grid.rtl.css.map
│   ├── bootstrap-grid.rtl.min.css
│   ├── bootstrap-grid.rtl.min.css.map
│   ├── bootstrap-reboot.css
│   ├── bootstrap-reboot.css.map
│   ├── bootstrap-reboot.min.css
│   ├── bootstrap-reboot.min.css.map
│   ├── bootstrap-reboot.rtl.css
│   ├── bootstrap-reboot.rtl.css.map
│   ├── bootstrap-reboot.rtl.min.css
│   ├── bootstrap-reboot.rtl.min.css.map
│   ├── bootstrap-utilities.css
│   ├── bootstrap-utilities.css.map
│   ├── bootstrap-utilities.min.css
│   ├── bootstrap-utilities.min.css.map
│   ├── bootstrap-utilities.rtl.css
│   ├── bootstrap-utilities.rtl.css.map
│   ├── bootstrap-utilities.rtl.min.css
│   ├── bootstrap-utilities.rtl.min.css.map
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap.min.css.map
│   ├── bootstrap.rtl.css
│   ├── bootstrap.rtl.css.map
│   ├── bootstrap.rtl.min.css
│   └── bootstrap.rtl.min.css.map
└── js
    ├── bootstrap.bundle.js
    ├── bootstrap.bundle.js.map
    ├── bootstrap.bundle.min.js
    ├── bootstrap.bundle.min.js.map
    ├── bootstrap.esm.js
    ├── bootstrap.esm.js.map
    ├── bootstrap.esm.min.js
    ├── bootstrap.esm.min.js.map
    ├── bootstrap.js
    ├── bootstrap.js.map
    ├── bootstrap.min.js
    └── bootstrap.min.js.map

Normally I install bootstrap.min.css with the map. That gives me all of the features and the map makes it easier for me to debug. The minified file is often unreadable, so the map references the original code.

In the same way, I would install the minified version of the bootstrap bundle with the corresponding map. The bundled version includes the Popper Plugin.

Popper, by the way is a positioning engine for things like tooltips, popovers and modals.

Customized

• rtl
• grid
• reboot
• utilities

In Bootstrap 5, you have the option of downloading versions of bootstrap that works with languages that use a right to left direction as opposed to the regular left to right direction.

With CSS, you can also download only the grid system, which bootstrap uses for layout. This will also only include flex, but no other utilities.

You can also download the reboot css, which helps different browsers have a consistent look and feel.

Finally, you can load just the items in the utilities section of bootsrap, which are things like flex, borders, colors, sizing, spacing, etc.

Ultimate

Download

bootstrap/
├── dist/
├── site/
├── js/
└── scss/

For the ultimate in customization, you can download the source code, which probably gives you more than what you need. There's a lot of stuff in there, but four main folders you might be interested in.

The dist folder has all of the CSS and JS files we went through earlier.

The site folder, has all of the documentation, plus some samples...maybe not a bad thing if you're working offline.

And then you get the javascript folder. Now this javascript folder is a bit different than the one in the dist folder. It has each javascript component in a separate file with individual maps and in different versions like for esm or umd loading strategies. Don't mess with that unless you know what you're doing.

The last important folder is the scss folder. This has the source files for sass. Again, for advanced users, but you can really customize your version of Bootstrap. There are two important files here. First, the bootstrap.scss file is the entry point for sass. It loads everything else. The second file is variables.scss. It has every variable you can customize to really change the way bootstrap looks.

If you want to learn more, check out my other course on Bootstrap with Sass. Although it might be an earlier version of sass, the concepts are the same and you can really learn to customize this framework.