electrify electrify - 1 year ago 68
Sass (Sass) Question

Customizing Bootstrap SASS variables in Rails

I need to reduce the font-size of Bootstrap's Jumbotron header in Rails.
I see here

that I need to add something like

@jumbotron-heading-font-size: ceil((@font-size-base * 2.5));

in my file


So I changed "@" to "$", please see below how the file looks now:

$jumbotron-heading-font-size: ceil(($font-size-base * 2.5));
$jumbotron-padding: 20px;
@import "bootstrap";

But this doesn't work.

Answer Source

I've found a solution. As I'm using Bootstrap 4, I had a look at


and found $display3-size variable there (this is a class for h1 tag inside Jumbotrone), so then I added the following line before @import bootstrap into my .scss file:

$display3-size: 2.5rem;

So it works now