Beginner's Guide to Customizing Bootstrap 5 with SASS

Bootstrap CSS is a great framework for making your web page look great, but how do you make it feel unique?

Project Setup

This guide assumes you have a project with a working SASS setup with Bootstrap. If you don't, clone our ProductDiv Bootstrap Starter project here. ProductDiv makes it easy to develop Bootstrap applications with utility classes! To learn more, check out the tutorial.

Make sure you have npm and git installed, then run:

git clone https://github.com/awestbro/productdiv-bootstrap-starter-free.git
cd productdiv-bootstrap-starter-free
npm i

To start our app, run npm run dev and visit http://localhost:3000/! Now we can start customizing the look and feel of our app.

How Customizing Bootstrap Works

Bootstrap 5 uses SASS to compile CSS files using variables and mixins. One cool feature of SASS variables is the !default property. Defining a variable like this: $white: #fff !default;, tells the SASS compiler to set the variable named $white to #fff unless the variable $white is already defined.

Luckily for us, Bootstrap's variables are all defined with !default so we can overwrite them before we compile the library.

For example: try adding the line $primary: blue; in our theme.scss file before the line that imports the Bootstrap library. Save, then check out the app in the browser. The navbar and primary button should be a blue now! Any variable can be overwritten by redefining the variable before importing Bootstrap. This feature lets you change the library to fit your exact style and needs!

Adding your own Colors

Like $primary, you can override any color you like in Bootstrap. Check out the colors documentation for all the main colors to override.

The main color variables you'll work with are:

• $primary
• $secondary
• $success
• $info
• $warning
• $danger
• $light
• $dark

Overwriting any one of these will give your app a custom feel already! Bootstrap defines these in the $theme-colors variable. If you redefine that map, you can add any color you like to bootstrap. For example, what would happen if we add a $tertiary variable to the $theme-colors map? Bootstrap would generate utility classes like: bg-tertiary, btn-tertiary, etc.

Importing New Fonts

Something as simple as changing a font can give your app a custom look and feel. Bootstrap also provides variables for fonts so they're easy to overwrite, but there are some gotchas to look out for.

Bootstrap has utility classes for fonts built in. These let you apply different weights to fonts like light, bold, etc. To get a font that will work out of the box, we need to know what weights Bootstrap supports. In the variables file, Bootstrap defines:

$font-weight-lighter:         lighter !default;   
$font-weight-light:           300 !default;   
$font-weight-normal:          400 !default;   
$font-weight-semibold:        600 !default;   
$font-weight-bold:            700 !default;   
$font-weight-bolder:          bolder !default;

To accommodate the lighter and bolder weights, we'll need to include 100 and 900 weights too.

To bring in custom fonts, we can use Google fonts here: https://fonts.google.com/. We'll use the Lato font since it has all the weights we need! To import it, use the @import directive in SASS like so:

@import url("https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700;900&display=swap");
$font-family-sans-serif: "Lato", -apple-system, system-ui, BlinkMacSystemFont,
 "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !default;

Overwriting the $font-family-serif variable tells Bootstrap to use our imported Lato font. Now our application has a beautiful default font!

You can import fonts and apply them only to specific elements as well!

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;700;900&display=swap");
h1,
h2,
h3,
h4,
h5,
h6,
.navbar-brand,
.btn,
.card-header {
 font-family: "Poppins";
}

Change fonts further by playing around with the $font- variables. For instance, changing the $font-size-base to 1.2rem increases your font size across all elements.

Fonts set the tone for your visitors and can change a site from feeling basic to bespoke!

What next?

Now that you have a good feel how to overwrite variables, you can change whatever you'd like! Try changing border-radius, box-shadow, and spacing variables to make a beautiful custom theme!

If you would like to get a head start on your next application, check out ProductDiv's Bootstrap PRO starter kit! It includes custom SASS themes and examples for you along with high quality HTML templates to get you started!