Bootstrap Customization

The default Bootstrap look is the same on many sites. You can change colors, fonts, sizes and radius to match your brand. There are three ways, from simple to powerful.

1. Override with your own CSS

Load your CSS file after Bootstrap, and write rules for the classes. For the buttons and many components Bootstrap uses local CSS variables, and the easiest way is to change those variables.

.btn-brand {
  --bs-btn-color: #fff;
  --bs-btn-bg: #6f42c1;
  --bs-btn-border-color: #6f42c1;
  --bs-btn-hover-bg: #59359a;
  --bs-btn-hover-border-color: #59359a;
}

<button class="btn btn-primary">Default primary</button>
<button class="btn btn-brand">Brand button</button>

2. Change the global CSS variables

Bootstrap 5.3 has many global variables in :root, like --bs-body-font-family, --bs-body-bg, --bs-border-radius and --bs-primary. You can change them in your CSS.

:root {
  --bs-body-font-family: Georgia, serif;
  --bs-border-radius: 1rem;
  --bs-link-color-rgb: 111, 66, 193;
}

<p>A paragraph with a <a href="#">link</a> in the changed font.</p>
<div class="card" style="max-width: 18rem"><div class="card-body">A card with a bigger radius.</div></div>

const root = getComputedStyle(document.documentElement);
console.log('--bs-border-radius = ' + root.getPropertyValue('--bs-border-radius').trim());
console.log('card radius in use = ' + getComputedStyle(document.querySelector('.card')).borderTopLeftRadius);

Note: changing --bs-primary only changes the things which use it (like links and utilities such as .text-primary). The .btn-primary has its own variables, as in the first example. For a full theme color change, use Sass.

3. Sass: change the variables before the import

This is the best way for a big change. Install Bootstrap with npm, and write your own Sass file. First set your variables, and then import Bootstrap. All the components, utilities and variables use your values.

npm install bootstrap@5.3.8 sass

// custom.scss
// 1. change the variables first
$primary: #6f42c1;
$border-radius: 0.75rem;

// 2. then import Bootstrap
@import "node_modules/bootstrap/scss/bootstrap";

npx sass --load-path=. custom.scss custom.css

We compiled exactly this file with Dart Sass 1.108.1 and Bootstrap 5.3.8. In the result CSS we found:

--bs-primary: #6f42c1;
--bs-border-radius: 0.75rem;

.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #6f42c1;
  --bs-btn-border-color: #6f42c1;
  ...

So the button, the links, the focus colors and all the other parts use the new color. The compile also printed the warning “Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0”. It is a warning only and the build works. The Bootstrap team plans to move to the new module system (@use) in a later version, so check the documentation for the current way.

Import only what you need

The file bootstrap.scss imports everything. You can import the parts one by one, to make a smaller CSS file:

@import "node_modules/bootstrap/scss/functions";
@import "node_modules/bootstrap/scss/variables";
@import "node_modules/bootstrap/scss/variables-dark";
@import "node_modules/bootstrap/scss/maps";
@import "node_modules/bootstrap/scss/mixins";
@import "node_modules/bootstrap/scss/root";

@import "node_modules/bootstrap/scss/reboot";
@import "node_modules/bootstrap/scss/type";
@import "node_modules/bootstrap/scss/containers";
@import "node_modules/bootstrap/scss/grid";
@import "node_modules/bootstrap/scss/buttons";
@import "node_modules/bootstrap/scss/utilities";
@import "node_modules/bootstrap/scss/utilities/api";

Which way to choose?

Way	Good for
Own CSS overrides	Small changes, quick results, no build tool
CSS variables	Fonts, radius, body colors and dark mode colors
Sass variables	A full theme, removing parts, a smaller CSS file

• Previous Page
• Next Page

---

Exercises & Assignments
No Content Found.

Interview Questions & Answers
No Content Found.