Bootstrap 4 Navbars

Bootstrap 4 navbars have collapse and expand features.It works on the basis of available screen size. Navbar expand features expand the navbar in the available space at the mention break point while as navbar collapse collapses the navbar in the small devices

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 4 Basic Horizontal Navbar

Step To Create Bootstrap Basic Horizontal Navbar Menu

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

General Syntax

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

Try It Now

Source Code

	
		<div class="container text-center my-2">
  <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 yourself

Source Code : Output

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.

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="#">Brand Logo</a>
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Nav Link</a>
    </li>
  </ul>
</nav>

Try It Now

Source Code

	
		<div class="container text-center my-2">
  <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
    <a class="navbar-brand" href="#">Brand Logo</a>
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Nav Link1 </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Nav Link2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Nav Link3</a>
      </li>
    </ul>
  </nav>
</div>
<!--/container-->

Try it yourself

Source Code : Output

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.

Centered Navbar

Add the .justify-content-center class to center the navigation bar.

Step 1:Add .navbar,.navbar-expand-sm,.justify-content-center & background color utility .navbar-light .bg-light to the <nav> element base class.
Step 2:Add .navbar-nav to the <ul> element base class.
Step 3:Add .nav-item to the <li> element base class.
Step 4:Add .nav-link to the <a> element base class.

General Syntax

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

Try It Now

Source Code

	
		<div class="container mt-4">
  <nav class="navbar navbar-expand-sm bg-light justify-content-center">
    <ul class="navbar-nav">
      <li class="nav-item"><a class="nav-link" href="#">Link 1</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Link 2</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Link 3</a></li>
    </ul>
  </nav>
</div>
<!--/container-->

Try it yourself

Source Code : Output

Note:Follow the above mention steps to create bootstrap centered navbar.

Bootstrp 4 Basic Vertical Navbar

Step To Create Bootstrap Basic Vertical Navbar Menu

Step 1: Add .navbar & background color utility.navbar-light .bg-light to the <nav> base class.
Step 2:Add .navbar-nav to the <ul> base class.
Step 3:Add .nav-item to the <li> base class.
Step 4:Add .nav-link to the <a> base class.

General Syntax

		<nav class="navbar bg-light">
  <ul class="navbar-nav">
    <li class="nav-item"><a class="nav-link" href="#">Link 1</a></li>
    <li class="nav-item"><a class="nav-link" href="#">Link 2</a></li>
    <li class="nav-item"><a class="nav-link" href="#">Link 3</a></li>
  </ul>
</nav>

Try It Now

Source Code

	
		<div class="container text-center my-2">
  <nav class="navbar bg-light">
    <ul class="navbar-nav">
      <li class="nav-item"><a class="nav-link" href="#">Link 1</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Link 2</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Link 3</a></li>
    </ul>
  </nav>
</div>
<!--/container-->

Try it yourself

Source Code : Output

Note:Follow the above mention steps to create bootstrap vertical navbar.

Our Tutorials

Html Tutorial HTML

Css Tutorial CSS

Bootstrap 5 Tutorial BOOTSTRAP 5

Bootstrap 4 Tutorial BOOTSTRAP 4

Materialize CSS Tutorial MATERIALIZE CSS