How to Create a Navigation Bar with BootStrap

How to Create a Navigation Bar with BootStrap

In this blog I will demonstrate and explain how to create a navigation bar using BootStrap. A Navigation Page is an essential part of website. It is one of most used feature of a website as the users will use it to navigate through the website. Making a mobile friendly navigation bar with JavaScript, CSS and HTML is very complicated for a new Web Developer. Fortunately BootStrap enables developer to create a navigation bar within minutes.

Lets Start Coding

Create a folder and inside the folder create an HTML file. Open the HTML file using any text editor. I am using ATOM and I highly recommend this. If you are unsure on how to use or download ATOM I will provide links below to help you setup.

Create your basic HTML structure with head, body and etc. and load the BootStrap using its CDN as show in figure 1.1. If you are unsure on how to do it you can go to my first blog post and learn.

figure 1.1

Inside the Body tags create a header tag and close it. Also make sure to write Notes for yourself stating it is a header as comments. Figure 2.1 will show an example. It is important to Document what the code is doing because later when you or another developer works on the project, it will help them understand code faster.

figure 2.1

Create a div and give it a class name “navbar navbar-inverse navbar-fixed-top” as shown in figure 3.1. It is a BootStrap class name. I will now explain the meaning of this class name.

  • navbar: this first word indicates that the content inside this div will be for a navigation bar.
  • navbar-inverse: This line of code indicates that the navbar will be black as described by the inverse tag. BootStrap has many colors such as navbar-light, navbar-blue and many others. Links will be given down below for you to discover more.
  • navbar-fixed-top: this code forces the navbar to stay at the top at all times.
figure 3.1

Create another div and give it a class name “navbar-header” as shown in figure 4.1.

  • navbar-header: indicates that it is a header. Now you will have to put the content inside the header.

Create a div inside the navbar-header and create a button with a class name of “class=”navbar-toggle” data-toggle=”collapse” data-target=”.navbar-collapse”” as shown in figure 4.1. This is the most important part of the navbar as it is also the most complicated one.

  • navbar-toggle: It indicates that it will be a toggle menu. Where it can be on and off.
  • data-toggle=”collapse” : it tell that it will collapse once the screen size changes to a small size.
  • data-target=”.navbar-collapse” : it will telling that navbar will collapse once screen changes to a mobile size.

There are three span tag inside the navbar-header. Those are the horizontal line which will make a hamburger menu. You may change the content inside it as you may wish.

figure 4.1

Create a new div with a class named “navbar-collapse collapse”

This div is in relation to the data-toggle and data-target that you had assigned in the div above. This is class tell that once the toggle/hamburger menu is pressed this menu will show and it will target the content inside this class.

You also have list inside the div. The list are given a class name “nav navbar-nav navbar-right”. As explained about this tell that it is part of the navbar and it will on the right side of the page. The code will be shown in figure 5.1 .

figure 5.1

The complete inside the header will be shown in Figure 6.1 and how the navbar looks in figure 7.1

figure 6.1
figure 7.1

Summary

  • You can link with BootStrap using a CDN and do not have to download any files.
  • A beautiful navigation bar can be created within minutes.

References

https://getbootstrap.com/docs/4.0/components/buttons/

https://getbootstrap.com/docs/3.3/about/

https://www.devsaran.com/blog/10-best-reasons-use-bootstrap-amazing-web-designs

“How to Create a Navigation Bar with BootStrap” Posted first on ” Web Development on Medium “
Author: Tenzin Yhicknyan

Author: Pawan Kumar

This Post Has 2 Comments

  1. I know this site provides quality depending posts and extra stuff, is there
    any other website which offers these kinds of information in quality?

  2. I do not know whether it’s just me or if perhaps everyone else experiencing issues
    with your website. It seems like some of the written text
    on your posts are running off the screen. Can someone
    else please comment and let me know if this is happening to them too?
    This might be a issue with my web browser because I’ve had this happen before.
    Thanks

Leave a Reply

Close Menu
%d bloggers like this:
Skip to toolbar