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/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<a class="navbar-brand" href="#">tindog</a>Try this
a.navbar-brand {
font-family: "Ubuntu";
font-size:2.5rem;
font-weight: bold;
}<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<a class="navbar-brand" href="#">tindog</a>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.