what's wrong with Navbar brand?

Question

I am writting a navbar code but i can't apply font-size to navbar-brand and can't padding-bottom the nave bar . -----HTML code-----

<section id="title">
    <div class="container-fluid">
      <!-- Nav Bar -->
      <nav class="navbar navbar-expand-lg navbar-dark">
        <a class="navbar-brand" href="">Tindog</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav ml-auto">
            <li class="nav-item">
              <a class="nav-link" href="">Contact</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="">Pricing</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="">Download</a>
            </li>
          </ul>
        </div>
      </nav>

. -----css code----- .

.navbar{
  padding-bottom: 4.5rem;
}

.navbar-brand{
  font-family: "Ubuntu";
  font-size: 2.5rem;
  font-weight: bold;
}

Answer 1

When using Bootstrap, you should use Important such as : !important , to style your default classes.

    .nav{
        padding-bottom: 4.5rem !important;
      }
      
      .navbar-brand{
        font-family: "Ubuntu";
        font-size: 2.5rem !important;
        font-weight: bold;
      }

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
      <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container-fluid">
          <a class="navbar-brand" href="#">Tindog</a>
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item">
                  <a class="nav-link" href="">Contact</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="">Pricing</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="">Download</a>
                </li>
              </ul>

          </div>
        </div>
      </nav>
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>