Bootstrap File Structure

Introduction

When you download Bootstrap directly from getbootstrap.com or install it via npm, you get a package containing several folders and files. Knowing what each one does helps you pick the right file to link, and helps you understand what to customize when you eventually want to change Bootstrap's default look.

The dist Folder

The `dist` (short for "distribution") folder contains the ready-to-use, compiled version of Bootstrap. This is what most beginners link to directly, either from a CDN or a locally downloaded copy. Inside `dist`, you will find two subfolders: `css` and `js`.

bootstrap/
├── dist/
│   ├── css/
│   │   ├── bootstrap.css
│   │   ├── bootstrap.min.css
│   │   ├── bootstrap-grid.css
│   │   └── bootstrap-utilities.css
│   └── js/
│       ├── bootstrap.js
│       ├── bootstrap.min.js
│       ├── bootstrap.bundle.js
│       └── bootstrap.bundle.min.js
└── scss/
    ├── bootstrap.scss
    ├── _variables.scss
    ├── _mixins.scss
    └── ... (many more partial files)

The css Folder

The `dist/css` folder contains the fully compiled stylesheet, `bootstrap.css`, along with a few specialized builds. `bootstrap-grid.css` contains only the grid system, useful if you want Bootstrap's layout tools without its component styling. `bootstrap-utilities.css` contains only the spacing, color, and display utility classes. Most projects simply use the full `bootstrap.css` (or its minified version) which includes everything.

The js Folder

The `dist/js` folder contains Bootstrap's JavaScript in a few different builds. `bootstrap.js` contains Bootstrap's own component logic but requires Popper.js to be loaded separately for correctly positioning tooltips, popovers, and dropdowns. `bootstrap.bundle.js` includes Popper.js already bundled in, so it is a single file with everything needed for full interactivity. This is why the installation lesson recommended using the bundle file.

The Source Sass Files

The `scss` folder contains Bootstrap's original source code, written in Sass (Syntactically Awesome Style Sheets), a CSS preprocessor. These files are broken into many small "partial" files, like `_variables.scss` (which defines colors, spacing, and breakpoints), `_mixins.scss` (reusable style snippets), and individual files for each component such as `_buttons.scss` or `_card.scss`. The main `bootstrap.scss` file imports all of these partials together and is compiled into the final `bootstrap.css` you see in the `dist` folder.

You only need the Sass source files if you plan to customize Bootstrap's design at the source level, for example changing its default primary color or spacing scale before compiling your own custom build.

// _variables.scss (simplified excerpt)
$primary: #0d6efd;
$secondary: #6c757d;
$success: #198754;
$spacer: 1rem;

Minified vs Unminified Files

You will notice files like `bootstrap.css` and `bootstrap.min.css` sitting side by side. The unminified version is formatted with indentation, spacing, and comments, making it readable if you want to inspect how a class is defined. The minified version (with `.min` in the filename) has all unnecessary whitespace, line breaks, and comments stripped out, making the file much smaller and faster to download.

Common Mistakes

Best Practices

Frequently Asked Questions

Key Takeaways

Summary

Understanding Bootstrap's file structure demystifies what you are actually linking into your project and sets you up to customize the framework later if you need to. With the setup basics covered, the next lesson dives into your first real layout tool: containers.