Bootstrap - Navbar - Class

   
   
 bootstrap  css  
 frontend  
Article Series

This article series contain few sections.

Supplementary Article for Sass.

Download Tutorial Source.

Where to Discuss?

Local Group

Table of Content

Preface

Goal: Common navigation bar.

Bootstrap used to be so popular. Bootstrap navigation bar could make your site, similar to any other website. Before planning customization, you might need to know common things, to build your very own navigation bar

1: Minimal

Having Bootstrap navigation bar is simple. You can examine each class in Bootstrap official documentation.

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>Should you decide to accept.</title>

  <link rel="stylesheet" type="text/css" href="assets/css/bootstrap.css">
</head>

<body>

  <nav class="navbar navbar-expand-md navbar-dark bg-dark">
    <div class="navbar-collapse">
      <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>
      </ul>
    </div>
  </nav>

</body>

</html>

You can see the respective result as below figure.

Bootstrap Navigation Bar: Minimal

Whether you want to add sr-only class for accesability is your choice. I put sr-only whenever possible in real life site, but I omit them for the sake of simplicity in this tutorial.

Directory Preparation

Now consider create directory for respective assets:

  • css

  • js

  • images

❯ tree -d step-02
step-02
└── assets
    ├── css
    ├── images
    └── js

4 directories

I change the structure a bit. Now all assets is in assets folder.

Bootstrap: Directory Preparation

We are going to need them for the rest of this chapter.

2: Simple

Consider change the body part of html a bit. Put some stuff in the navigation header such as logo.

Here I represent navbar-menu for use with responsive design later.

<body>

  <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top ">
    <a class="navbar-brand" href="#">
       <img src="images/logo-gear.png" alt="Home" />
    </a>
    <div class="collapse navbar-collapse">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#"
             >Blog <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">About</a>
        </li>
      </ul>
    </div>
  </nav>

</body>

You can have a look at the expected result in image below:

Bootstrap Navigation Bar: Simple

Notice that as bootstrap default, the blog menu and about menu won’t be shown in small screen. So you need a desktop screen to see this. Or access with burger menu in the next chapter.

You are free to use your custom logo. I actually made some logo, and here we can use it as an example for this guidance.

Bootstrap Navigation Bar: Custom Logo

  • Size [width x height]: 96px * 96px

Stylesheet

Prepare the head first.

<head>
  ...

  <link rel="stylesheet" type="text/css" href="assets/css/bootstrap.css">
  <link rel="stylesheet" type="text/css" href="assets/css/main.css">
</head>

And we require to add this element rule in stylesheet :

.navbar-brand img {
  width: 32px;
  height: 32px;
  margin-top:    -10px;
  margin-bottom: -10px;
}

3: Long

Stuffed with Items

Consider populate the navigation bar with more menu and stuff. The item is self explanatory.

<body>

  <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">

    <a class="navbar-brand" href="#">
       <img src="assets/images/logo-gear.png" alt="Home" />
    </a>

    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#"
           >Blog <span class="sr-only">(current)</span></a>
      </li>
    </ul>

    <button class="navbar-toggler" type="button" 
        data-toggle="collapse" data-target="#navbarCollapse" 
        aria-controls="navbarCollapse" aria-expanded="false" 
        aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

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

      <ul class="navbar-nav mr-auto">
        <li class="nav-item active dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" 
             role="button" data-toggle="dropdown" 
             aria-haspopup="true" aria-expanded="false">Archives
          </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdown">
            <a class="dropdown-item" href="#">By Tags</a>
            <a class="dropdown-item" href="#">By Category</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">By Chronology</a>
          </div>
        </li>
        <li class="nav-item active">
          <a class="nav-link" href="#">About</a>
        </li>
      </ul>

      <form class="form-inline mt-2 mt-md-0">
        <input class="form-control mr-sm-2" type="text" 
          placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-light my-2 my-sm-0" 
          type="submit">Search</button>
      </form>

    </div>
  </nav>

</body>

You can see the respective result as below figure.

Bootstrap Navigation Bar: Long Stuffed

Bootstrap has a very nice dropdown menu.

      <ul class="navbar-nav mr-auto">
        <li class="nav-item active dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" 
             role="button" data-toggle="dropdown" 
             aria-haspopup="true" aria-expanded="false">Archives
          </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdown">
            <a class="dropdown-item" href="#">By Tags</a>
            <a class="dropdown-item" href="#">By Category</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">By Chronology</a>
          </div>
        </li>
        <li class="nav-item active">
          <a class="nav-link" href="#">About</a>
        </li>
      </ul>

Unfortunately, this require javascript. As will be explained in the next chapter.

Bootstrap Navigation Bar: Dropdown Menu

Responsive

Consider have a look at the result in small screen.

Bootstrap Navigation Bar: Responsive

What is Next ?

There are more, about Navigation Bar in Bootstrap. Consider continue reading [ Bootstrap - Navigation Bar - Javascript ].

Thank you for reading.