Customizing Bootstrap with SASS

Introduction

This tutorial aims to guide you through the process of customizing Bootstrap using SASS. By the end of this tutorial, you'll understand how to use SASS to make your CSS more efficient and maintainable. You’ll also learn how to apply SASS features to Bootstrap to customize it according to your needs.

What You Will Learn

• Introduction to Bootstrap and SASS
• Installing Bootstrap and setting up SASS
• Customizing Bootstrap with SASS

Prerequisites

• Basic understanding of HTML, CSS, and JavaScript
• Basic knowledge of Bootstrap and SASS
• Node.js and npm installed on your machine

Step-by-Step Guide

Installing Bootstrap and Setting up SASS

First, install Bootstrap in your project directory using npm:

npm install bootstrap

Then, install Dart Sass, which is the primary Sass compiler:

npm install sass

Customizing Bootstrap with SASS

Bootstrap's source Sass files are included if you downloaded or installed bootstrap via npm. You can import them into your project's Sass files and override the variables to customize the styles.

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

// You can override variable here
$theme-colors: (
  "primary": #007bff,
  "secondary": #6c757d,
  "success": #28a745,
  "info": #17a2b8,
  "warning": #ffc107,
  "danger": #dc3545,
  "light": #f8f9fa,
  "dark": #343a40
);

Code Examples

Example 1: Changing Primary Color

The following example demonstrates how to change the primary color in Bootstrap:

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

// Override the primary color
$theme-colors: (
  "primary": #ff0000
);

// Re-compile Bootstrap
@import "node_modules/bootstrap/scss/bootstrap.scss";

In this code:
- We import Bootstrap's source Sass files.
- We override the primary color in the $theme-colors map.
- We re-compile Bootstrap.

Example 2: Changing the Font Size Base

The following example shows how to change the base font size:

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

// Override the base font size
$font-size-base: 1rem; // 1rem equals 16px

// Re-compile Bootstrap
@import "node_modules/bootstrap/scss/bootstrap.scss";

In this code:
- We import Bootstrap's source Sass files.
- We override the base font size with $font-size-base.
- We re-compile Bootstrap.

Summary

In this tutorial, we learned how to customize Bootstrap using SASS. We installed Bootstrap and Dart Sass, then we changed the primary color and the base font size.

Next Steps

• Explore more Bootstrap variables to customize
• Learn more about SASS and its features

Additional Resources

• Sass Documentation
• Bootstrap Documentation

Practice Exercises

Exercise 1: Change the Background Color

Change the background color of the body in Bootstrap. Hint: Use the $body-bg variable.

Exercise 2: Change the Grid Breakpoints

Customize the grid breakpoints in Bootstrap. Hint: Use the $grid-breakpoints and $container-max-widths maps.

Exercise 3: Customize the Button

Customize the primary button's padding and font size. Hint: Use the $btn-padding-y, $btn-padding-x, and $btn-font-size variables.

Solutions:

// Exercise 1
$body-bg: #f0f8ff;

// Exercise 2
$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px,
);

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1320px,
);

// Exercise 3
$btn-padding-y: 0.5rem;
$btn-padding-x: 1.5rem;
$btn-font-size: 1.25rem;

Remember to always re-compile Bootstrap after changing the variables:

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