How To Customize Bootstrap With Sass?

Last Updated : 24 Sep, 2024

Bootstrap is one of the most popular CSS frameworks used to develop responsive websites quickly. However, using the default Bootstrap design can result in many websites looking the same. This is where Sass (Syntactically Awesome Style Sheets) comes in handy. By customizing Bootstrap with Sass, you can create a unique design while still using Bootstrap’s powerful grid system, components, and utilities.

Why Customize Bootstrap with Sass?

Customizing Bootstrap with Sass allows you to:

Modify variables: Change Bootstrap’s default variables like colors, fonts, and sizes to match your brand.
Use only what you need: Remove unused components to reduce the size of your final CSS file.
Easily create themes: Sass makes it easy to switch themes or create multiple themes for different sections of your site.

Prerequisites

Below are the approaches to customize Bootstrap using Sass:

Table of Content

Changing Bootstrap Variables
Overriding Bootstrap Components
Adding Custom Styles

Steps to Set Up Bootstrap and Sass

Step 1: Install Node.js and npm

Ensure you have Node.js and npm installed on your system. You can download them from the official Node.js website.

Step 2: Create a New Project Folder

Create a new folder for your project:

mkdir bootstrap-sass-customization
cd bootstrap-sass-customization

Step 3: Initialize npm

Inside the folder, initialize a new npm project:

npm init -y

Step 4: Install Bootstrap and Sass

Now install Bootstrap and Sass via npm:

npm install bootstrap@5 sass

Step 5: Update your package.json with scripts to compile Sass:

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

Folder Structure

Updated Dependencies

"dependencies": {
    "bootstrap": "^5.3.3",
    "sass": "^1.79.3"
  }

Run the command to watch for Sass changes:

npm run build-css

1. Changing Bootstrap Variables

You can change predefined variables like colors, fonts, spacing, etc., in Bootstrap by overriding its default variables in your Sass file. One of the simplest ways to customize Bootstrap with Sass is to change its default variables.

Example: The SCSS code customizes the Bootstrap primary button's background and border colors, with a hover effect, and applies these styles to a button in the HTML file.

HTML

<!-- index.html -->

<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="stylesheet" href="dist/custom.css">
</head>

<body>
    <button class="btn btn-primary m-5">Primary Button</button>
</body>

</html>

CSS

// scss/custom.scss

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

// Correct way
.btn-primary {
    & {
        background-color: #e74c3c;
        border-color: #e74c3c;
    }

    &:hover {
        background-color: #c0392b;
    }
}

Output

Animation24 — How to Customize Bootstrap with Sass

2. Overriding Bootstrap Components

Sometimes, you may want to customize specific components like buttons or cards. You can override Bootstrap styles by targeting these components directly in your custom Sass file. You can apply specific changes to Bootstrap components by targeting their classes directly and adding your custom styles.

Example: The SCSS overrides Bootstrap's primary button styles, changing the background, border, and hover colors with Sass-compliant syntax, and applies these styles to a button in the HTML file.

HTML

<!-- index.html -->

<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="stylesheet" href="dist/custom.css">
</head>

<body>
    <button class="btn btn-primary">Primary Button</button>
</body>

</html>

CSS

// scss/custom.scss

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

// Override button styles with Sass compliance
.btn-primary {

    // Wrapping declarations in & {} block to avoid deprecation warning
    & {
        background-color: #e74c3c;
        border-color: #3c7be7;
    }

    &:hover {
        background-color: #35c02b;
    }
}

Output

3. Adding Custom Styles

In addition to modifying existing Bootstrap components, you can add entirely new styles to your project using Sass. You can write custom styles using Sass and include them alongside Bootstrap's existing styles for added functionality.

Example: The SCSS defines custom styles for a header with a green background, white text, and hover effect, and applies these styles to a header in the HTML file.

HTML

<!-- index.html -->

<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="stylesheet" href="dist/custom.css">
</head>

<body>
    <header class="custom-header">
        Welcome to My Custom Bootstrap Page
    </header>
</body>

</html>

CSS

// scss/custom.scss

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

// Custom styles for a header
.custom-header {
    & {
        background-color: #2ecc71;
        // Wrapping in & {}
        color: white;
        padding: 20px;
        text-align: center;
        font-size: 24px;
    }

    &:hover {
        background-color: #27ae60;
        // Darker green on hover
    }
}

Output

fewfewg — How To Customize Bootstrap With Sass?

Bootstrap 5 Customizing the Grid

sharmaroqty

Improve

Article Tags :

How To Customize Bootstrap With Sass?

Why Customize Bootstrap with Sass?

Prerequisites

Steps to Set Up Bootstrap and Sass

Step 1: Install Node.js and npm

Step 2: Create a New Project Folder

Step 3: Initialize npm

Step 4: Install Bootstrap and Sass

Step 5: Update your package.json with scripts to compile Sass:

Folder Structure

Updated Dependencies

1. Changing Bootstrap Variables

2. Overriding Bootstrap Components

3. Adding Custom Styles

Similar Reads

Thank You!

What kind of Experience do you want to share?