Bootstrap 4 Navbar

Bootstrap 4 navbar has collapse and expand features. It works on the basis of available screen size. Navbar expand features to expand the navbar in the available space at the mentioned breakpoint while as navbar collapse collapses the navbar in the small devices

Bootstrap 4 Basic Horizontal Navbar

Step To Create Bootstrap 4 Basic Horizontal Navbar Menu

Add .navbar,.navbar-expand{-sm|-md|-lg|-xl} & background color utility.navbar-light .bg-light to the <nav> element base class.
Add .navbar-nav to the <ul> element base class.
Add .nav-item to the <li> element base class.
Add .nav-link to the <a> element base class.

Example

General Syntax

      <nav class="navbar navbar-expand-sm bg-light">
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
  </ul>
</nav>

Try it now

Source Code

          <div class="container mt-4">
  <h2>Bootstrap 4 Basic Horizontal Navbar</h2>
  <nav class="navbar navbar-expand-sm bg-light">
    <ul class="navbar-nav">
      <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>
  </nav>
</div>
<!--/container-->

Try it now

Source Code: Output

Bootstrap 4 Basic Horizontal Navbar

Note: In this example .navbar-nav is assigned to <ul> element base class ,.nav-item is assigned to the <li> element base class and .nav-link is assigned to the <a> element base class.

Please keep in mind that .navbar-nav is assigned to the <ul> element base class,.nav-item is assigned to the <li> element base class & .nav-link is assigned to the <a> element base class.

Bootstrap Navbar Brand/Logo & Collapsing The Navigation Bar

bootstrap .navbar-brand shows brand name of company or brand logo.

By applying .navbar-brand class on images,It adjusts image to fit vertically with respect to navbar.

Using Brand Name

General Syntax

      <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <a class="navbar-brand" href="#">Logo</a>
  <ul class="navbar-nav">
    <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>
</nav>

Try it now

Source Code

          <div class="container mt-4">
  <h2>Bootstrap 4 Navbar Brand Name</h2>
  <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
    <a class="navbar-brand" href="#">Logo</a>
    <ul class="navbar-nav">
      <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>
  </nav>
</div>

Try it now

Source Code: Output

Bootstrap 4 Navbar Brand Name

Note: In this example .navbar-brand is used for brand logo,.navbar-expand-sm is used to expand navbar at the breakpoint of small devices..bg-dark & .navbar-dark is used for navigation background color.

Online Test / Quiz

Question set 1

Web Tutorials

Html Tutorial HTML

Javascript Tutorial JAVASCRIPT

Css Tutorial CSS

Bootstrap 5 Tutorial BOOTSTRAP 5

Bootstrap 4 Tutorial BOOTSTRAP 4