How to use Sass Variables In Bootstrap

Custom CSS

Bootstrap 5 is built with Sass, a powerful CSS preprocessor. By modifying Bootstrap’s Sass variables, developers can change fundamental aspects of the framework, such as colors, typography, and layout settings. This approach allows for more comprehensive customization and ensures consistency throughout the project.

Run the below command for package.json file:

npm init -y

Install Bootstrap and the required dependencies by running the following command:

npm install bootstrap@5.3.0 sass

Example: The example below shows how to customize Bootstrap 5 using Sass Variables.

HTML

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>Modifying Sass Variables Example</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <div class="container my-5">
        <h1>Modifying Sass Variables Example</h1>
        <button type="button" 
                class="btn btn-primary">
          Primary Button
          </button>
        <button type="button" 
                class="btn btn-secondary">
          Secondary Button
          </button>
    </div>

    <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>

</html>

CSS

// Override Bootstrap's primary color
$primary: #ff6b6b;

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

Run the below command to compile the Sass file to CSS:

//This command will create a new styles.css file in your project directory, which you can then link to your HTML file.
npx sass styles.scss styles.css

Open the index.html file in your web browser to see the modified Bootstrap styles applied to the buttons.

npx sass --watch styles.scss styles.css

Output:

Customize Bootstrap 5 with Sass Variables

How to Customize Bootstrap 5?

To customize Bootstrap 5, adjust its appearance by using custom CSS to modify default styles or by utilizing Sass variables to customize design elements like colors, typography, and spacing. These methods enable you to control your project’s visual presentation.

Table of Content

Custom CSS
Modifying Sass Variables

Tags:

#Bootstrap-Questions #Bootstrap #Web Technologies

Custom CSS

How to use Sass Variables In Bootstrap

How to Customize Bootstrap 5?

Similar Reads