Navbars in Bootstrap

The Basics

Have a look here for more details on navbars in Bootstrap 5!

  • The <nav> element is the container for our entire Navbar. It uses the navbar class, as well a class like navbar-light or navbar-dark for the color of the text, plus something for the color of the background, which is bg-light in the example above! I added rounded-pill too - it should be obvious what that does! 
                        
                        <nav class="navbar navbar-light bg-light rounded-pill>
                           <---****-->
                        </nav>
  • The navbar-expand class lets Bootstrap know when we want the collapse to stop (see the collapse class below) 
                        
                        <nav class="navbar navbar-expand-lg navbar-light bg-light rounded-pill>
                           <---****-->
                        </nav>
    It's possible to choose the breakpoint at well, and I opted for navbar-expand-lg in the header...and navbar-expand-sm in the footer.

    • Navbar Brand

  • The navbar-brand class is used for the logo or main title of the Navbar, which is "TeachTime" in the footer example: 
                        
                        <nav class="navbar navbar-expand-sm navbar-dark bg-primary">
                            <a class="navbar-brand" href="#">Bob's Example</a>
                        </nav>

    • Including Tags

  • There are two ways to include the links in your Navbar. We can either use a div with a lot of anchor tags inside, or use an unordered list. Let's look at the former: 
                    
                            <div class="collapse navbar-collapse">
                                <div class="navbar-nav">
                                    <a href="Home Link" class="nav-item nav-link">Home</a>
                                    <a href="About Link" class="nav-item nav-link">About</a>
                                    <a href="Contact Link" class="nav-item nav-link">Contact</a>
                                </div>
                            </div>
    The collapse class is used for the container that holds the Navbar links: 
                        
                        <nav class="navbar navbar-dark bg-primary">
                            <a class="navbar-brand" href="#">Bob's Example</a>
                            <div class="collapse navbar-collapse">
                                <div class="navbar-nav">
                                    <a href="Home" class="nav-item nav-link">Home</a>
                                    <a href="About Link" class="nav-item nav-link">About</a>
                                    <a href="Contact Link" class="nav-item nav-link">Contact</a>
                                </div>
                            </div>
                        </nav>
    The collapse class helps to show or hide content!
  • To ensure the links in our anchor tags (either in the unordered list or div with anchors) are visible, we use the navbar-expand class (as mentioned in the Basics section! This can be adjusted for the size of the viewport, like so: 
                        
                        <nav class="navbar navbar-expand-sm navbar-dark bg-primary">
                            <a class="navbar-brand" href="#">Bob's Example</a>
                            <div class="collapse navbar-collapse">
                                <div class="navbar-nav">
                                    <a href="Home" class="nav-item nav-link">Home</a>
                                    <a href="Home" class="nav-item nav-link">About</a>
                                    <a href="Home" class="nav-item nav-link">Contact</a>
                                </div>
                            </div>
                        </nav>
  • The navbar-nav class is used for the unordered list that holds the Navbar links.
  • The nav-item class is used for each list item that holds a Navbar link.
  • The nav-link class is used for each link within the Navbar.
  • You can customize this basic example by adding more links, changing the colors or styles, or adding a search bar or other elements to the Navbar.

    • Hamburger

  • The navbar-toggler class is used for the button that appears when the Navbar is in a smaller screen size. It is used to toggle the visibility of the Navbar links - and commonly involves a hamburger icon. It involves creating a button with a class of navbar-toggler, and including a span class of navbar-toggler-icon inside the button. 
                        
                        <button class="navbar-toggler">
                            <span class="navbar-toggler-icon"></span>
                        </button>
    However, this alone isn't enough!
  • We want our hamburger to expand upon clicking. To do this, we need a data-target attribute, and a data-toggle.

    • Fixed Navbars

  • We make fix the navbar to the top or bottom of the page, or use the (not always browser-incorporated) sticky option

    • Bootstrap Icons

    There are many icons to choose from at the website linked!