Bootstrap Setup

Bootstrap Setup Overview

For quick prototypes, linking the compiled CSS and JS from a CDN is enough. For real applications, installing Bootstrap as an npm dependency gives you version control, offline builds, and access to the Sass source for customization.

Once installed, Bootstrap exposes a dist folder with minified CSS and JS bundles, plus a scss folder with the uncompiled source you can import selectively into your own build pipeline.

Bootstrap Setup Example

npm install bootstrap@5.3.3

// main.js (bundler entry point)
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min.js';

// or import the Sass source to customize variables
// @import 'bootstrap/scss/bootstrap';

After installing the package, most bundlers let you import the compiled CSS and JS directly in your entry file. Importing the Sass source instead gives you access to variables and mixins for customization, covered later in the Sass lesson.

Top 10 Bootstrap Setup Examples

These are the setup commands and imports you will reach for most often when installing Bootstrap.

Popular Real-World Bootstrap Setup Examples

These setup patterns show how teams wire Bootstrap into common project types.

Best Practices

• Pin an exact Bootstrap version in package.json to avoid unexpected breaking changes.
• Import the bundled JS (bootstrap.bundle.min.js) unless you already manage Popper separately.
• Prefer importing the Sass source when you know you'll need theme customization.
• Keep Bootstrap's CSS import near the top of your global stylesheet chain.
• Use a package manager instead of manually downloading files for easier upgrades.
• Check the changelog before upgrading major or minor versions.
• Only import the Sass partials you need if bundle size matters.

Common Mistakes

• Installing Bootstrap but forgetting to import the CSS anywhere in the app.
• Importing bootstrap.min.js without Popper, then finding dropdowns and tooltips don't position correctly.
• Mixing a CDN-linked Bootstrap version with an npm-installed version in the same project.
• Not pinning the version, leading to silent upgrades that change class behavior.
• Importing the entire Sass source when only a few components are needed.
• Forgetting to reinstall dependencies after cloning a repository that uses Bootstrap.

Key Takeaways

• Bootstrap can be installed via npm, yarn, pnpm, or linked from a CDN.
• The dist folder holds precompiled CSS and JS; the scss folder holds customizable source.
• bootstrap.bundle.min.js includes Popper, required for dropdowns, tooltips, and popovers.
• Sass imports let you customize variables before compiling the framework.
• Pinning versions avoids unexpected breaking changes across a team.