Bootstrap 5 Tutorial

Bootstrap 5:BS5 Navbar

Bootstrap 5 Navbars

Bootstrap 5 navbars have collapsed and expanded features. It works on the basis of available screen size. Navbar expands 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 5 Basic Horizontal Navbar

Step To Create Bootstrap Basic Horizontal Navbar Menu

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

General Syntax

Try it now

Source Code

Code Explanation

Note:Follow the above mention step to create a bootstrap basic navigation.

Navbar Brand & Collapsing

bootsrap .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.

Navbar: Brand Name

General Syntax

Try it now

Source Code

Code Explanation

Note:Follow the above mention steps to create bootstrap navbar having brand name.

Navbar: Brand Logo

Place brand logo inside .navbar-brand element.

General Syntax

Try it now

Source Code

Code Explanation

Note:Follow the above mention steps to create bootstrap navbar having brand logo.

Dropdown Split Buttons

Add .dropdown-toggle-split to the <button> having .dropdown-toggle.It is used for proper spacing around the dropdown caret.

General Syntax

Try it now

Source Code

Source Code : Output

Code Explanation

Note: Please keep in mind that assign an additional .dropdown-toggle-split class to the <button> element base class to make dropdown split buttons.

Navbar: Collapsing

Use collapse concept inside navbar to create collapsing navbar.

General Syntax

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  
  <div class="container-fluid">
  
    <a class="navbar-brand" href="#">Navbar</a>
    
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    
      <span class="navbar-toggler-icon"></span>
      
    </button>
    
    <div class="collapse navbar-collapse" id="navbarNav">
    
      <ul class="navbar-nav">
      
        <li class="nav-item">
        
          <a class="nav-link active" aria-current="page" href="#">Home</a>
          
        </li>
        
        <li class="nav-item">
        
          <a class="nav-link" href="#">About</a>
          
        </li>
        
       </ul>
       
    </div>
    
  </div>
  
</nav>

Try it now

Source Code

<div class="container">

<h2 class="text-center">
   Bootstrap Navbar With Collapsing Feature
</h2>

<nav class="navbar navbar-expand-lg navbar-light bg-light">

  <div class="container-fluid">

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

    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">

    <span class="navbar-toggler-icon"></span>

    </button>

    <div class="collapse navbar-collapse" id="navbarNav">

      <ul class="navbar-nav">

        <li class="nav-item">

          <a class="nav-link active" aria-current="page" 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>

    </div>

  </div>

</nav>

</div><!--/container-->

Code Explanation

Note:Follow the above mention steps to create bootstrap navbar having collapsing features.

Navbar:Vertical Navbar

Steps To Create Vertical Navbar Menu

Add .navbar & background color utility.navbar-light .bg-light to <nav> base class.
Add .navbar-nav to <ul> base class.
Add .nav-item to <li> base class.
Add .nav-link to <a> base class.

General Syntax

Try it now

Source Code

Code Explanation

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

Centered Navbar

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

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

General Syntax

Try it now

Source Code

Code Explanation

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

Navbar:Background Color

To change navbar background color ,navbar background color can be change very easily.use .navbar-dark for dark background-color and .navbar-light for light background-color.Then customize it,with the background-color utility classes i.e bg-*.

General Syntax

Try it now

Source Code

<div class="container">

<h2 class="text-center">Navbar:Background Color</h2>

<nav class="navbar navbar-expand-sm navbar-dark bg-dark">

  <ul class="navbar-nav mb-2 mb-lg-0">

    <li class="nav-item">

      <a class="nav-link active" aria-current="page" href="#">Home</a>

    </li>

    <li class="nav-item">

      <a class="nav-link" href="#">About</a>

    </li>

    <li class="nav-item">

      <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>

    </li>

  </ul>

</nav><br>

<!---->

<nav class="navbar navbar-expand-sm navbar-dark bg-primary">

  <ul class="navbar-nav mb-2 mb-lg-0">

    <li class="nav-item">

      <a class="nav-link active" aria-current="page" href="#">Home</a>

    </li>

    <li class="nav-item">

      <a class="nav-link" href="#">About</a>

    </li>

    <li class="nav-item">

      <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>

    </li>

  </ul>

</nav><br>



<nav class="navbar navbar-expand-sm navbar-light">

  <ul class="navbar-nav mb-2 mb-lg-0">

    <li class="nav-item">

      <a class="nav-link active" aria-current="page" href="#">Home</a>

    </li>

    <li class="nav-item">

      <a class="nav-link" href="#">About</a>

    </li>

    <li class="nav-item">

      <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>

    </li>

  </ul>

</nav>

</div> <!--/container-->

Code Explanation

Note:Follow the above steps to create bootstrap colored navbar.

Navbar With Dropdown

General Syntax

<nav class="navbar navbar-expand-md navbar-light bg-light">

    <a href="#" class="navbar-brand">Brand Name</a>

    <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">

        <span class="navbar-toggler-icon"></span>

    </button>

    <div class="collapse navbar-collapse justify-content-between" id="navbarCollapse">

        <div class="navbar-nav">

            <a href="#" class="nav-item nav-link active">Home</a>

            <a href="#" class="nav-item nav-link">Profile</a>

            <div class="nav-item dropdown">

                <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Messages</a>

                <div class="dropdown-menu">

                    <a href="#" class="dropdown-item">Inbox</a>

                    <a href="#" class="dropdown-item">Sent</a>

                    <a href="#" class="dropdown-item">Drafts</a>

                </div>

            </div>

        </div>

    </div>

</nav>

Try it now

Source Code

<div class="container">

<h2 class="text-center">Navbar With Dropdown</h2>

<nav class="navbar navbar-expand-lg navbar-light bg-light">

<div class="container-fluid">

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

  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdownId" aria-controls="navbarNavDropdownId" aria-expanded="false" aria-label="Toggle navigation">

  <span class="navbar-toggler-icon"></span>

  </button>

  <div class="collapse navbar-collapse" id="navbarNavDropdownId">

    <ul class="navbar-nav">

      <li class="nav-item">

        <a class="nav-link active" aria-current="page" href="#">Home</a>

      </li>

      <li class="nav-item dropdown">

        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuId" role="button" data-bs-toggle="dropdown" aria-expanded="false">

          Services

        </a>

        <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuId">

          <li><a class="dropdown-item" href="#">Service1</a></li>

          <li><a class="dropdown-item" href="#">Service2</a></li>

          <li><a class="dropdown-item" href="#">Service3</a></li>

        </ul>

      </li>

    </ul>

  </div>

</div>

</nav>

</div> <!--/container-->

Code Explanation

Note: Follow the above steps to create bootstrap navbar having dropdown feature.

Search Form With Navbar

General Syntax

Try it now

Source Code

Code Explanation

Note:Here,search form and button both are placed inside navbar.

Navbar Brand With Search Form

General Syntax

Try it now

Source Code

Code Explanation

Note:To place <form> element inside navbar, assign .d-flex to the <form> element base class and assign .form-control to the <form> input control.

Navbar With Addon

General Syntax

Try it now

Source Code

Code Explanation

Note:To place <form> element inside navbar, assign .container-fluid to the <form> element base class and assign .input-group to the form controls container base class.At the end,place addon inside <span> element and assign .input-group-text to the <span> element base class and also assign .form-control to the input form control base class.

Navbar:Text

General Syntax

Try it now

Source Code

<div class="container mt-5">

<h2 class="text-center">Bootstrap Navbar With Text</h2>

<nav class="navbar navbar-expand-lg navbar-light bg-light">

  <div class="container-fluid">

    <a class="navbar-brand" href="#">Navbar Brand</a>

    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">

    <span class="navbar-toggler-icon"></span>

    </button>

    <div class="collapse navbar-collapse" id="navbarText">

      <ul class="navbar-nav me-auto mb-2 mb-lg-0">

        <li class="nav-item">

          <a class="nav-link active" aria-current="page" 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="#">Services</a>

        </li>

      </ul>

      <span class="navbar-text">

        Register

      </span>

      <span class="navbar-text">

        | Login

      </span>

    </div>

  </div>

</nav>

</div><!--/container-->

Code Explanation

Note: To place text inside the navbar,write text information inside the <span> element and provide .navbar-text to the <span> element base class.

Navbar:Container

General Syntax

Try it now

Source Code

Code Explanation

Note: Navbar and container both are used at a time.

Navbar: Fixed Top

The navigation bar can also be fixed at the top or at the bottom of the page. A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the page scroll.The .fixed-top class makes the navigation bar fixed at the top:

General Syntax

Try it now

Source Code

Code Explanation

Note: To create fixed top navbar,assign .fixed-top to the navbar base class.

Navbar: Fixed Bottom

Use the .fixed-bottom class to make the navbar stay at the bottom of the page.

General Syntax

Try it now

Source Code

Code Explanation

Note: To create fixed bottom navbar,assign .fixed-bottom to the <nav> element base class.

Bootstrap 5 Navbars:Sticky Top

Use the .sticky-top class to make the navbar fixed/stay at the top of the page when you scroll the page. This class does not work in IE11 and earlier (will treat it as position: relative).

General Syntax

Try it now

Source Code

Code Explanation

Note: To create bootstrap 5 navbars having sticky top feature, assign .sticky-top to the <nav> element base class.

Online Test / Quiz

Question set 1

Tutorials HTML CSS Bootstrap 4 Bootstrap 5

Performance Evalution HTML Quiz/Test CSS Quiz/Test Bootstrap 4 Quiz/Test Bootstrap 5 Quiz/Test

Practical Approach Coaching Software Computer Software Skill Management Software School Management Software