BootstrapHow-ToBeginner · 4 min read

How to Use Sass with Bootstrap: Simple Guide

To use Sass with Bootstrap, download Bootstrap's source files that include .scss files. Then, customize Bootstrap by editing its Sass variables and compile the Sass files into CSS using a Sass compiler like dart-sass or build tools.

📐

Syntax

Bootstrap's Sass files use @import to include partials and variables. You can override variables before importing Bootstrap's main styles to customize the design.

Key parts:

$variable-name: Sass variables to control Bootstrap styles.
@import: Includes Bootstrap's Sass partial files.
Compile Sass to CSS using a tool like sass input.scss output.css.

scss

// Custom Bootstrap Sass file
// 1. Override variables before import
$primary: #ff6347; // change primary color

// 2. Import Bootstrap's main Sass
@import "node_modules/bootstrap/scss/bootstrap";

💻

Example

This example shows how to change Bootstrap's primary color using Sass and compile it to CSS.

scss and html

// custom.scss
$primary: #007bff; // Set primary color to blue
@import "node_modules/bootstrap/scss/bootstrap";

/* HTML file example */

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="custom.css">
  <title>Bootstrap Sass Example</title>
</head>
<body>
  <button class="btn btn-primary">Primary Button</button>
</body>
</html>

Output

<button class="btn btn-primary" style="background-color:#007bff;">Primary Button</button>

⚠️

Common Pitfalls

Not overriding variables before importing Bootstrap's Sass will not change styles.
Importing Bootstrap Sass files in the wrong order can cause errors.
Forgetting to compile Sass to CSS means changes won't appear in the browser.
Using old Bootstrap CSS files instead of source Sass files prevents customization.

scss

// Wrong way: overriding after import
@import "node_modules/bootstrap/scss/bootstrap";
$primary: #ff0000; // This won't change the color

// Right way: override before import
$primary: #ff0000;
@import "node_modules/bootstrap/scss/bootstrap";

📊

Quick Reference

Tips for using Sass with Bootstrap:

Always override variables before importing Bootstrap.
Use a modern Sass compiler like dart-sass.
Keep your custom Sass file separate for easy updates.
Use npm or yarn to install Bootstrap source files.
Compile Sass to CSS and link the CSS file in your HTML.

✅

Key Takeaways

Override Bootstrap Sass variables before importing to customize styles.

Use a Sass compiler to convert .scss files into CSS for the browser.

Install Bootstrap source files via npm or yarn for easy Sass access.

Keep custom Sass separate to maintain clean and update-friendly code.

Compile and link the generated CSS file in your HTML to see changes.