Bootstrap 5 Tutorial
v5.3.0Bootstrap 5 Tutorial
Bootstrap 5 Folder Structure
Understanding the Bootstrap folder structure helps with customization and advanced usage.
Downloaded Package Structure
Complete Folder Tree
bootstrap-5.3.0/
├── css/
│ ├── bootstrap.css # Unminified CSS
│ ├── bootstrap.min.css # Minified CSS (production)
│ ├── bootstrap.css.map # Source map
│ └── bootstrap.min.css.map # Minified source map
├── js/
│ ├── bootstrap.js # Unminified JS (without Popper)
│ ├── bootstrap.min.js # Minified JS
│ ├── bootstrap.bundle.js # Unminified with Popper
│ ├── bootstrap.bundle.min.js # Minified with Popper (recommended)
│ └── *.js.map files # Source maps
└── scss/ # Source SCSS files
├── bootstrap.scss # Main SCSS file
├── _variables.scss # Customizable variables
├── _mixins.scss # Mixins
├── _utilities.scss # Utility classes
├── _grid.scss # Grid system
├── _buttons.scss # Button styles
├── _forms.scss # Form styles
└── ... (40+ partials)Key Files Explained
CSS Files
- bootstrap.css - Development version
- bootstrap.min.css - Production version
- .map files - For debugging in browser tools
JavaScript Files
- bootstrap.js - Core JS without Popper
- bootstrap.bundle.js - Includes Popper (recommended)
- .min.js - Minified versions for production
SCSS Source Structure
The SCSS folder contains all source files for customization.
Main SCSS Partial Files
| File | Purpose |
|---|---|
_variables.scss | All customizable variables (colors, spacing, etc.) |
_mixins.scss | Reusable mixins for common patterns |
_grid.scss | Grid system classes and breakpoints |
_buttons.scss | Button styles and variants |
_forms.scss | Form controls and layouts |
_utilities.scss | Utility classes generator |
_helpers.scss | Helper classes |
Custom SCSS Setup
Creating Custom Bootstrap Build
Custom SCSS File Structure
your-project/
├── scss/
│ ├── custom.scss # Your custom SCSS file
│ └── _custom-variables.scss # Your custom variables
├── css/
│ └── custom.css # Compiled CSS
└── package.jsoncustom.scss Example
// Import Bootstrap functions first
@import "../node_modules/bootstrap/scss/functions";
// Override default variables
$primary: #ff6b6b;
$secondary: #794afa;
$font-size-base: 1.1rem;
// Import Bootstrap
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
// ... import other components as needed
// Your custom styles
.custom-class {
background-color: $primary;
}package.json Script
"scripts": {
"compile:sass": "sass scss/custom.scss css/custom.css --watch"
}NPM Package Structure
When installed via NPM:
node_modules/bootstrap/
├── dist/ # Compiled files
│ ├── css/
│ └── js/
├── scss/ # Source SCSS
├── js/ # Source JS
└── package.jsonNote: When using NPM, import from
node_modules/bootstrap/dist/ for compiled files or node_modules/bootstrap/scss/ for SCSS source.Best Practices
- Use SCSS source for customization projects
- Use CDN for quick prototypes
- Use NPM for framework integrations (React, Vue, etc.)
- Always use
.bundle.min.jsfor production
