Fine course charting through the BootStrap Navbar
Tags: bootstrap, development, web, frameworks
Published: 2018-07-14 14:15:33

---
title: Fine course charting through the BootStrap Navbar
published: true
description: This article walks you through a step by visual and code guide to coding the Navbar in Bootstrap 4.
tags: Bootstrap, Development, Web, Frameworks
cover_image: https://cl.ly/2q221a2b2w07/Image%202018-07-14%20at%206.19.31%20PM.png
---

Okay! I'm not even going to front: I LOVE USING BOOTSTRAP!

I think this has a lot to do with the fact that when I picked up using Ruby on Rails all that 4+ years ago, Bootstrap was the recommended go to resource to design front end. Boy, did it integrate into Rails nicely!!?!! You bet!

I will share the little bits of small gotchas that can easily get you peeved over using Bootstrap as often as I can here on dev.to with corresponding code snippets. If this is something that you are interested in, I recommend that you tag along for the ride. Quickly a brief intro. What is Bootstrap?

"Build responsive, mobile-first projects on the web with the world's most popular front-end component library.

Bootstrap is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with our Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery."

- Source: [The official Bootstrap website.](https://getbootstrap.com/)

Well I don't know about the claim being the world's most popular front end component library. Nonetheless is it used a lot? Well it is. Make that definitely so. I assume two kinds of readers, one who requires a simplified breakdown and another who just wants to see the Github gist. If you are the latter, kindly skip the next paragraph.

_"Keep it as simple as possible, but not any simpler"_
- Albert Einstein

Basically I define Bootstrap as the go to resource when you don't want/like/desire to write CSS styles for your web app. You just make use of the default already created Bootstrap options available. Many a time all you will have to do is just change the front appearing text as I will show you with creating a simple Navigation Bar for your web app.

First we head over to the Bootstrap documentation where we are given 3 options out of which we have to choose one to get Bootstrap working in our app. I have preference for the CDN and that is what we will rely on in this article and all future articles I will write on Bootstrap. Using the CDN has the following [advantages](https://www.globaldots.com/9-benefits-using-cdn/)

Now, let's get building that Navbar. So let's begin with the default Bootstrap Starter Template Code:

```
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">

    <title>BootStrap Nav!</title>
  </head>
  <body>

    <!-- Plug Bootstrap Nav Bar code here -->

    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>
  </body>
</html>

```

Well, as often is the case a web app has a part of it's navigation:

Home | About | Contact | FAQs | Blog

We will just stick with those 5 items when we go to the next articles in this series. Let's head over to Bootstrap documentation to copy the code for creating a Nav bar.

```
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</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>
  </button>

  <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>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <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>
    </form>
  </div>
</nav>
```

This is the default navigation view of the Navbar in Bootstrap and all we have to do is plug it into the html starter template where I left the comments.

Then we have:

{% gist https://gist.github.com/emmaodia/59ab01e080bcfca53dd1cd71ec632045 %}

You should have something which looks like this:

{% codepen https://codepen.io/emmaodia/full/bjVXpN/ %}

If you can see that view on your end, congratulations. I will end here in other not to make this lesson any longer that it should be.

The goal here was just to show you how easy it is to build a web app Navbar using Bootstrap. In follow up articles I will share how you can customize the Navbar to suite your needs, look, feel and what other considerations you may have.

Many thanks for reading! Please drop whatever comments you may have, I'm most glad to hear from you. Also if you are open to conversations about Bootstrap. Kindly say "Hi"!


Cover image credit: Photo by Artem Sapegin via [unsplash](https://unsplash.com)
Further Reading: [The Official Bootstrap Documentation](https://getbootstrap.com)
CDNs: [What is a CDN?](https://www.cloudflare.com/learning/cdn/what-is-a-cdn/)