Skip to main content
X

Explore your training options in 10 minutes

Using the Bootstrap Framework to Create a Navbar

Christina Kopecky - September 28, 2020


A navbar is a user interface (UI) element that’s positioned at the top of a web page. It contains elements that make the navigational user experience more friendly by placing branding and navigational links that route to different components. In Bootstrap, we can use their documentation to create a navbar quickly that is fully functional and responsive.

In this article, we will review how to set up Bootstrap and take a look at some examples of Bootstrap Navbars in action.

Getting Started

The first thing we need to do to set up a Bootstrap Navbar is to ensure we have the proper dependencies. For this demonstration, we need Bootstrap, PopperJS, and jQuery. Take a look at Bootstrap’s Quick Start page for assistance with getting your dependencies added to your project.

Get offers and scholarships from top coding schools illustration

Find Your Bootcamp Match

  • Career Karma matches you with top tech bootcamps
  • Access exclusive scholarships and prep courses










By continuing you agree to our Terms of Service and Privacy Policy , and you consent to receive offers and opportunities from Career Karma by telephone, text message, and email.

It’s your decision with how you handle the dependency requirement, but the easiest, more beginner-friendly way is to use the content delivery network – the CDN – for jQuery, Popper.js, and Bootstrap. Be careful of the order of your <script> tags – order matters here.

You’re now ready to get started!

Using Bootstrap Documentation to Create a Navbar

On the left hand side of the Introduction/Getting Started page, you see a sidebar that links to various things. Take a look for the Components link and click on it. This will navigate you to the first of Bootstrap’s many available components: “Alerts”. If we take a look at the sidebar again, it now shows the different links to all the different components we have available to us.

Click on the Navbar component to get started. This will have the information we need.

How it Works

Navbars start with a basic <nav> or <div> element with a class of .navbar and .navbar-expand{-sm | -md | -lg | -xl} . This allows access to Bootstrap’s color scheme classes and also allows for responsive collapsing. If you are using a <div> tag, be sure to add role=”navigation” to explicitly identify it as a navigation element for assistive devices. Utility classes (my-0, my-2, etc.) can be used to control spacing.

Subcomponents

There are several built-in subcomponents that are available to use within our navbar. You can pick and choose what’s needed for your project.

Subcomponent Use
.navbar-brand Company, product, logo, or project name.
.navbar-nav Includes support for dropdowns
.navbar-toggler Used in conjunction with the collapse plugin so that the navbar can be made responsive.
.form-inline Custom form controls or actions
.navbar-text Vertically centered strings of text
.collapse.navbar-collapse Groups and/or hides navbar contents

Here is an example of the Navbar component with most of the possible subcomponents included. This one will automatically collapse at the lg (large) breakpoint.

<!DOCTYPE html>
<html>
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width">
   <title>Bootstrap Navbar</title>
   <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 href="style.css" rel="stylesheet" type="text/css" />
 </head>
 <body>
   <nav class="navbar navbar-expand-lg navbar-light bg-light">
 <a class="navbar-brand" href="#"><img width="150" src="https://d30vrbc6r9jj52.cloudfront.net/web-illustrations/layout/ck_logo.png" /></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 dropdown">
       <a class="nav-link dropdown-toggle smallcaps" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
         Bootcamps
       </a>
       <div class="dropdown-menu" aria-labelledby="navbarDropdown">
         <a class="dropdown-item" href="#">Popular Bootcamps</a>
         <a class="dropdown-item" href="#">Bootcamp Prep</a>
         <div class="dropdown-divider"></div>
         <a class="dropdown-item" href="#">Bootcamp Financing</a>
         <a class="dropdown-item" href="#">Bootcamp Grads and Alumni</a>
 
       </div>
     </li>
     <li class="nav-item dropdown">
       <a class="nav-link dropdown-toggle smallcaps" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
         Coding
       </a>
       <div class="dropdown-menu" aria-labelledby="navbarDropdown">
         <a class="dropdown-item" href="#">Coding Tools</a>
         <a class="dropdown-item" href="#">Git</a>
         <div class="dropdown-divider"></div>
         <a class="dropdown-item" href="#">HTML</a>
         <a class="dropdown-item" href="#">CSS</a>
         <a class="dropdown-item" href="#">JS</a>
         <div class="dropdown-divider"></div>
         <a class="dropdown-item" href="#">Python</a>
         <a class="dropdown-item" href="#">Ruby</a>
         <a class="dropdown-item" href="#">C++</a>
         <a class="dropdown-item" href="#">Java</a>
       </div>
     </li>
     <li class="nav-item dropdown">
       <a class="nav-link dropdown-toggle smallcaps" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
         Career Resources
       </a>
       <div class="dropdown-menu" aria-labelledby="navbarDropdown">
         <a class="dropdown-item smallcaps" href="#">Career Advice</a>
         <a class="dropdown-item smallcaps" href="#">Interviews</a>
         <div class="dropdown-divider"></div>
         <a class="dropdown-item smallcaps" href="#">Tech Cities</a>
         <a class="dropdown-item smallcaps" href="#">Tech Salaries</a>
       </div>
     </li>
     <li class="nav-item dropdown">
       <a class="nav-link dropdown-toggle smallcaps" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
         Tech Fields
       </a>
       <div class="dropdown-menu" aria-labelledby="navbarDropdown">
         <a class="dropdown-item" href="#">Web Design</a>
         <a class="dropdown-item" href="#">Web Development</a>
         <a class="dropdown-item" href="#">Software Engineering</a>
         <a class="dropdown-item" href="#">Data Science</a>
       </div>
     </li>
     <li class="nav-item">
       <a class="nav-link smallcaps" href="#">News & Commentary</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>
<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.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
   <script src="script.js"></script>
 </body>
</html>

The content between the <div> tags with the .navbar-toggler class is everything that will be collapsed into the hamburger menu when it hits the lg breakpoint.

Conclusion

The Bootstrap Documentation is very good when putting together a Navbar component. It’s a matter of picking and choosing what you need for your project and utilizing the code that Bootstrap provides for your project.

In this article we went over how to add Bootstrap to your project and created a sample navigation bar that can be used in a project. Use this as a springboard for your own project to create your own custom styled navbar!

Venus, a software engineer at Rockbot

"Career Karma entered my life when I needed it most and quickly helped me match with a bootcamp. Two months after graduating, I found my dream job that aligned with my values and goals in life!"

Venus, Software Engineer at Rockbot

About us: Career Karma is a platform designed to help job seekers find, research, and connect with job training programs to advance their careers. Learn about the CK publication.

What's Next?

Christina Kopecky

About the author: Christina is an experienced technical writer, covering topics as diverse as Java, SQL, Python, and web development. She earned her Master of Music in flute performance from the University of Kansas and a bachelor's degree in music with minors in French and mass communication from Southeast Missouri State. Prior to joining the Career Karma team in June 2020, Christina was a teaching assistant, team lead, and section lead at Lambda School, where she led student groups, performed code and project reviews, and debugged problems for students. Christina's technical content is featured frequently in publications like Codecademy, Repl.it, and Educative.

Skip to main content