electrify electrify - 3 months ago 19
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

app/assets/stylesheets/bootstrap_customization.css.scss


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

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

https://github.com/twbs/bootstrap-rubygem/blob/master/assets/stylesheets/bootstrap/_variables.scss

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