Introduction

Bootstrap is designed to be customized. While the default styles are great for prototyping, most professional projects require a unique look. In this chapter, we explore how to override Bootstrap's defaults using CSS and Sass.

1. Customizing via CSS

The simplest way to customize Bootstrap is to add your own CSS file after Bootstrap's CSS and override classes.

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

Example: Changing Button Color

/* custom.css */
.btn-primary {
  background-color: #1a73e8;
  border-color: #1a73e8;
}

2. Customizing via Sass (Recommended)

For deeper customization (like changing the grid size, global font, or theme colors), use Sass variables. This requires an NPM setup.

Step 1: Create a main Sass file

// styles.scss

// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
@import "node_modules/bootstrap/scss/functions";

// 2. Override default variables
$primary: #ff5722;
$font-family-sans-serif: "Inter", system-ui, -apple-system, sans-serif;

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

Why Sass? Modifying $primary changes buttons, links, forms, and utilities instantly across the entire project.

3. Creating Custom Components

Sometimes standard Bootstrap components aren't enough. You can extend Bootstrap by building custom components that leverage its grid and utilities.

Example: Custom Product Card

Image Area

Product Name

Custom styled card using Bootstrap utilities.

<!-- Using Bootstrap Utilities + Custom Class -->
<div class="custom-card border rounded shadow-sm p-3">
  ...
</div>

4. Best Practices

Avoid using !important: Proper CSS specificity or Sass overrides are cleaner.
Keep Custom CSS Separate: Don't edit bootstrap.css directly; you'll lose changes when updating.
Use CSS Variables: Bootstrap 5 supports CSS variables (--bs-primary) for real-time theming.

Chapter Summary

In this chapter, you learned:

Simple customization by overriding CSS classes.
Powerful customization using Sass variables.
How to extend Bootstrap with custom components.

Next, we will look at more advanced layout helpers and examples.

Customizing Bootstrap