Bootstrap class: .navbar-brand

<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
</nav>

Preview

Check .navbar-brand 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.

Open in Visual Editor →

Tips 💡

You don't need to remember all CSS classes. Just use the Bootstrap Editor instead.

Sass source

/* _navbar.scss:42 */
.navbar-brand {
  display: inline-block;
  padding-top: $navbar-brand-padding-y;
  padding-bottom: $navbar-brand-padding-y;
  margin-right: $navbar-padding-x;
  font-size: $navbar-brand-font-size;
  line-height: inherit;
  white-space: nowrap;

  @include hover-focus {
    text-decoration: none;
  }
}

/* _navbar.scss:199 */
.navbar-brand {
  color: $navbar-light-active-color;

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

/* _navbar.scss:251 */
.navbar-brand {
  color: $navbar-dark-active-color;

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

Uses variables

/* _navbar.scss:42 */
$navbar-brand-padding-y
$navbar-brand-padding-y
$navbar-padding-x
$navbar-brand-font-size

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

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