Have you ever tried to customize the font size for your Bootstrap-powered website?
It’s not something you can easily do without recompiling Bootstrap’s CSS. If you change the font size on your page, you’ll want that change to cascade through. A change in the base font size should recalculate header font sizes and margins/padding for text elements like paragraph tags.
Let’s look at how to create a custom Bootstrap SASS build without maintaining our own fork of Bootstrap.
Using Bootstrap with Bower
We’re going to use
gulp to compile Bootstrap, so we’ll need Node.js.
First let’s make a
package.json file for Node to see. Either use
npm init -y or create a
package.json file containing just an empty JSON object (
Now let’s install
$ npm install --save-dev gulp gulp-bower gulp-sass
package.json file should now look something like this:
1 2 3 4 5 6 7
Now let’s use Bower to install bootstrap. This will allow us to import Bootstrap into our SCSS code and compile it down to CSS manually.
bower.json file using
bower init or by manually creating one:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
Now let’s install
bootstrap-sass with Bower.
bower.json file should now have
bootstrap-sass listed as a dependency:
1 2 3
Now we can make an SCSS file that includes bootstrap into our project. Let’s call our SCSS file
Now let’s use gulp to compile our
app.scss which includes Bootstrap SASS:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
Now when we run
gulp, our compiled Bootstrap CSS should appear in the
1 2 3
Customizing the font size
Now let’s look at how we can go about customizing the font size in Bootstrap.
Notice that the value of the
$font-size-base variable in the
_variables.scss file is used for calculating a variety of other important variables. For example 8 of the lines below rely on
1 2 3 4 5 6 7 8 9 10
!default flags? That
!default flag means the variables will be set only if they don’t have a value already.
All of the variables assigned in Bootstrap SASS’s
_variables.scss file have a
!default flag. That means we can override those variables by assigning our own values before we import Bootstrap.
Let’s copy Bootstrap’s
_variables.scss file and make our own custom version:
Now we need to reference our custom variables module from our
1 2 3
Remember to import our
variables module before we import Bootstrap! If we import it afterward, our changes customizations won’t be applied.
Now let’s change
Now if we recompile our CSS we should see our larger font size reflected throughout our application:
Try it out!
I made a sample project to demonstrate how easy it is to customize Bootstrap variables before building Bootstrap SASS.
Know about a different way to customize Bootstrap? Did I make a mistake in my explanation? Leave a comment and let me know.