'Cant Overwrite font-size of bootstrap 5

I am learning bootstrap 5. so when I tried to edit the font-size of the navbar-brand. It kept the basic font-size and didn't work. further more if I try to add paddings to the navbar-brand it doesn't apply paddings on top or bottom.

.navbar-brand {
  font-family: "Ubuntu";
  font-size: 2.5rem;
  font-weight: bold;
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
  <a class="navbar-brand" href="#">tindog</a>
htmlcssbootstrap-5


Solution 1:[1]

Try this

a.navbar-brand {
  font-family: "Ubuntu";
  font-size:2.5rem;
  font-weight: bold;
  }
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
  <a class="navbar-brand" href="#">tindog</a>

Solution 2:[2]

To prevent overwriting your CSS too much I recommend downloading Bootstrap as NPM Package, you can then change the font-family in SCSS -> and then you don't have to work with specificy overwrites (!important), instead the SCSS compiler will just compile Bootstrap with your specified font :)

//Include any default variable overrides here
$font-family-base : Ubuntu;

// Include Bootstrap stylesheets
@import "../node_modules/bootstrap/scss/bootstrap.scss";

See https://getbootstrap.com/docs/5.0/customize/sass/ for more.

Solution 3:[3]

Try using the display-num class. It worked for me.

display-1

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Asif
Solution 2 Clout Hack
Solution 3 Stephen

Related Questions