Question 42715 in Html Question posted in
Some basic documentation can be found here.

Issue with Bootstrap navbar. Unable to get padding on the left and right to push in the navbar image and navbar-nav links – Html

I’m expecting the navbar to have padding on the left and right per my CSS. I can’t figure out after a long while trying to remove the div-container fluid, or if I’m declaring the wrong selector, I’m lost. I’m not necessarily looking for the flat-out answer, maybe a point in the right direction. I’m new to Bootstrap and still trying to wrap my head around some concepts. Where I think the problem lies is with the bootstrap classes and predefined code.

.navbar {
  padding-left: 2rem;
  padding-right: 2rem;
}

.nav-logo {
  width: 20%;
}
<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">


<!-- Body -->
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
  <img class="nav-logo" src="https://via.placeholder.com/50.jpg" alt="smart-yards-logo">
  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
    <ul class="navbar-nav ms-auto">
      <li class="nav-item">
        <a class="nav-link" href="">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="">About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="">Contact</a>
      </li>
    </ul>
  </div>
</nav>
Tags:

2

Answers


  1. 0

    It is a specificity weight issue. I recommend that you read into CSS specificity weight.

    Bootstrap uses many selectors that create a "high" specificity to ensure that the styles apply correctly.

    The easiest way to raise the specificity weight of your selector is the usage of !important. However, that is rarely a solution but in most cases a cover-up for the actual issue.
    The best solution would be to use nav.navbar as selector which raises the specificity weight from 0, 1, 0 to 0, 1, 1 which in your case is sufficient to be not overwritten by Bootstrap:

    nav.navbar {
  padding-left: 2rem;
  padding-right: 2rem;
}

.nav-logo {
  width: 20%;
}
    <!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">


<!-- Body -->
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
  <img class="nav-logo" src="https://via.placeholder.com/50.jpg" alt="smart-yards-logo">
  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
    <ul class="navbar-nav ms-auto">
      <li class="nav-item">
        <a class="nav-link" href="">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="">About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="">Contact</a>
      </li>
    </ul>
  </div>
</nav>
    Login or Signup to reply.
  2. 0

    tacoshy’s answer also works, and if you are wondering about specificity you can check below website. https://specificity.keegan.st/

    You can also solve this by always adding your specified styles (style.css) in the external stylesheet below the bootstrap stylesheet link, which is the standard way you add specified styles, below is the reference

    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">

    Note: Always styles that are lower in order of specification have higher priority

    .navbar {
  padding-left: 2rem;
  padding-right: 2rem;
}

.nav-logo {
  width: 20%;
}
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>

</head>
<body>
    <!-- Body -->
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
    <img class="nav-logo" src="https://via.placeholder.com/50.jpg" alt="smart-yards-logo">
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
      <ul class="navbar-nav ms-auto">
        <li class="nav-item">
          <a class="nav-link" href="">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="">Contact</a>
        </li>
      </ul>
    </div>
  </nav>
</body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search