Lesson 8 – Bootstrap Navbar

Navbar is the most important part of any website. It is the first thing visitors see along with the hero area. Well, Bootstrap makes it particularly easy to create a beautiful and fully responsive Navbar in a matter of minutes.

There are quite a few classes you need to remember to create a Navbar. But, once you have them at your fingertips, it will be a breeze to get any type of Navbar you want. In our case, we will create a basic Navbar in Bootstrap. Take a look at the following example.

<!DOCTYPE html>
<html lang="en">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" 
    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet"type="text/css" href="bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>Bootstrap Navbar</title>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <a class="navbar-brand" href="#">Drona School</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
              <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            <li class="nav-item">
              <a class="nav-link" href="#">Blog</a>
            <li class="nav-item">
              <a class="nav-link disabled" href="#" tabindex="-1">Contact Us</a>
          <form class="form-inline my-2 my-lg-0">
            <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>

Now, let’s explain some of the utilities used in the above example. The “navbar” class is a wrapper that wraps the actual Navbar. Similarly, “.navbar-expand” enables responsive collapsing. Then “.navbar-brand” highlights your website’s or company’s name. “.navbar-nav” ensures lightweight and full-height navigation whereas “.navbar-toggler” works in combination with the collapse plugin. On the other hand, “.collapse” and “.navbar-collapse” show and hide Navbar content depending upon the screen size.

This is how our Navbar actually looks like.

In the next lesson, we will discuss how to create a simple Jumbotron or Hero section in Bootstrap.