Bootstrap CSS Classes

Bootstrap CSS class .navbar-toggler

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">Navbar</a>

  <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
    <ul class="navbar-nav mr-auto mt-2 mt-md-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
    </ul>
  </div>
</nav>

Preview

CSS source

/* _navbar.scss:184 */
.navbar-toggler {
  display: none;
}

/* _navbar.scss:228 */
.navbar-toggler {
  color: $navbar-light-color;
  border-color: $navbar-light-toggler-border-color;
}

/* _navbar.scss:280 */
.navbar-toggler {
  color: $navbar-dark-color;
  border-color: $navbar-dark-toggler-border-color;
}

Check .navbar-toggler in a real project

Click one of the examples listed below to open the Shuffle Visual Editor with the UI library that uses the selected component.

More Bootstrap CSS classes in Navbar category

© 2024 Shuffle. All rights reserved.