is now part of Shuffle™. The new editor includes templates for Bootstrap, Bulma, Material-UI, and Tailwind CSS.
Switch to Shuffle →

Bootstrap class: .navbar-text

<nav class="navbar navbar-light bg-light">
  <span class="navbar-text">
    Navbar text with an inline element
  </span>
</nav>

Preview

Tips 💡

Sass source

/* _navbar.scss:84 */
.navbar-text {
  display: inline-block;
  padding-top: $nav-link-padding-y;
  padding-bottom: $nav-link-padding-y;
}

/* _navbar.scss:237 */
.navbar-text {
  color: $navbar-light-color;
  a {
    color: $navbar-light-active-color;

    @include hover-focus {
      color: $navbar-light-active-color;
    }
  }
}

/* _navbar.scss:289 */
.navbar-text {
  color: $navbar-dark-color;
  a {
    color: $navbar-dark-active-color;

    @include hover-focus {
      color: $navbar-dark-active-color;
    }
  }
}

Uses variables

Code copied to the clipboard.

Copying failed

/* _navbar.scss:84 */
$nav-link-padding-y
$nav-link-padding-y

/* _navbar.scss:237 */
$navbar-light-color
$navbar-light-active-color
$navbar-light-active-color

/* _navbar.scss:289 */
$navbar-dark-color
$navbar-dark-active-color
$navbar-dark-active-color

More in Bootstrap Navbar