Designing a simple navigation bar with Bootstrap 4

One of the best assets of using a CSS framework is the ability to quickly prototype a design by using abstractions for commonly used layout styles and UI modules. While stopping there can result in a cookie-cutter design, overriding styles by adding your own customization can lead to a personalized design that still follows common rules and best practices. This blog post will walk through creating a basic navigation bar, using the most popular CSS framework around, Bootstrap. This post will be based on using Bootstrap 4, although the basic principles will be the same across most all versions.

Getting Started

The first step is to download the compiled CSS and JavaScript files for Bootstrap from getbootstrap.com. After unzipping the file you should find a directory containing css and js directories. Add an index.html file in the root, and set up the basic structure of the HTML document:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Mike's Computer Repair</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    <h1>Welcome to Mike's Computer Repair</h1>
​
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" 
            crossorigin="anonymous"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

 

The above example is the basic skeleton of an HTML document using Bootstrap. It links the main boostrap.min.css CSS file (minified), sets the website – viewport ratio to 1:1, and links to the jQuery and Bootstrap JavaScript files right before the closing </body> tag. Any custom JavaScript files need to be placed after the bootstrap.min.js file, and bootstrap.min.js must be placed after the jQuery file.

Now that we have the basic structure of the site, let’s add the navigation bar:

<nav class="navbar navbar-expand-lg navbar-light">
  <a class="navbar-brand" href="#">Mike's Computer Repair</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="#">About</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">
          Services
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">PC Repair</a>
          <a class="dropdown-item" href="#">Virus Removal</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Computer Literacy</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Contact</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>

 

The above code may look a little complicated but can be broken down as follows:

The <nav class="navbar navbar-expand-lg navbar-light"> tag applies the navbar-related classes to a nav section, setting it to expand to a large width, with a light background.

The <a> tag with a class of navbar-brand can be used to set the site name.

The <button> section that follows creates a hamburger menu button once the viewport shrinks to a certain width. The regular menu links will be hidden, able to be toggled into view via the button.

The rest of the code is an unordered list, with list items representing each of the items in the menu. Following this is a <form> element for a Search field and accompanying Search button.

The results will look like this:

navigation bar with Bootstrap 4

This is perfectly fine but could use some customization. It’s far better to override the existing styles rather than try to edit the original Bootstrap .css file, so <link> a new .css file in the <head> like so:

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Mike's Computer Repair</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/styles.css" rel="stylesheet">
  </head>

 

We can now apply our own styles to the page to customize things a bit:

nav {
  background-color: #faf7e8;
  margin: 0 auto;
  margin-top: 0px;
  height: 160px;
  padding: 0 120px !important;
}
.navbar-nav {
  margin: 0 auto;
}
.navbar-brand {
  font-family: 'Libre Baskerville', serif;
}

 

In the above example, we adjust the overall background-color of the nav section, as well as margin, height, and padding to give everything a bit more room.

Secondly, we center the menu section so it has more space from the navbar-brand and Search section.

Lastly, we change the font of the navbar-brand, using Libre Baskerville from Google Fonts. You will also need to link to the Google Fonts CDN in the <head> of the HTML document:

<head>
    ...
    <link href="https://fonts.googleapis.com/css?family=Libre+Baskerville" rel="stylesheet">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/styles.css" rel="stylesheet">
</head>

 

The results should look something like this:

navigation bar with Bootstrap 4

 

Like this blog? Read similar posts.

Post a Comment

Comments are moderated. Your email is kept private. Required fields are marked *

© 2019 Sunlight Media LLC