How to Use Bootstrap Source Files for Custom Styling

To use Bootstrap source files, download the source package from the official Bootstrap website, then customize the Sass (.scss) files and JavaScript modules as needed. Compile the Sass files into CSS using a build tool like npm scripts or webpack, then include the compiled CSS and JavaScript in your project.

Syntax

The Bootstrap source files include .scss files for styles and .js files for JavaScript components. You customize Bootstrap by editing these source files and then compiling them.

• Sass files: Located in scss/ folder, these control Bootstrap's styles and variables.
• JavaScript files: Located in js/src/, these are modular scripts for interactive components.
• Build tools: Use npm scripts or bundlers like webpack to compile Sass to CSS and bundle JavaScript.

json

{
  "scripts": {
    "build-css": "sass scss/bootstrap.scss dist/css/bootstrap.css"
  }
}

Example

This example shows how to customize Bootstrap's primary color by editing the _variables.scss file and compiling the Sass to CSS.

scss

// _variables.scss
$primary: #ff6600; // Change primary color

// bootstrap.scss
@import "variables";
@import "bootstrap";

// Compile with:
sass scss/bootstrap.scss dist/css/bootstrap.css

Output

A CSS file with Bootstrap styles where the primary color is orange (#ff6600).

Common Pitfalls

Common mistakes when using Bootstrap source files include:

• Not installing required build tools like node-sass or sass before compiling.
• Editing compiled CSS files instead of source .scss files, which gets overwritten on rebuild.
• Forgetting to import Bootstrap's core files after customizing variables, causing styles to break.
• Not including compiled CSS and JavaScript files properly in your HTML.

scss

// Wrong: Editing compiled CSS directly
/* styles.css */
.primary { color: #ff6600; }

// Right: Change variable and recompile
$primary: #ff6600;
@import "bootstrap";

Quick Reference

Summary tips for using Bootstrap source files:

• Download source from Bootstrap official site.
• Use npm and sass to compile Sass files.
• Edit _variables.scss to customize colors, fonts, and spacing.
• Import Bootstrap's main Sass files after your variables.
• Bundle JavaScript modules with tools like webpack or Rollup.
• Include compiled CSS and JS files in your HTML with <link> and <script> tags.

Key Takeaways

Download Bootstrap source files to customize styles and scripts.

Edit Sass variables in _variables.scss before compiling to CSS.

Use build tools like npm scripts or webpack to compile and bundle.

Never edit compiled CSS directly; always change source Sass files.

Include compiled CSS and JavaScript files properly in your HTML.