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.