Bootstrap: Four Steps To Create

Every website has a navigation which help direct users to the right place and find the right information.

As I am learning the code, I always want to create a navigation bar. I did tried to build nav-bar before, but I failed.

Today, the Udemy course instructor showed how to apply Bootstrap Nav-bar to create a responsive nav-bar.

Step One: Add the nav default element

We copy the <nav> with the default class attribute value on the HTML page.

On the top of the page shows a light gray area. The nav-bar content will be displayed in this area.

Step Two: Put the website name in the navbar-header

We apply the navbar-header div code in the HTML page and put the website name “My Blog” in the <a> tag.

As the result, the web page show your brand name or website name on the navi-bar.

Step Three: Create navigation list

Under the navbar-header, we give the <ul> a class attribute value “nav navbar-nav”. Then, we create a short list include “Home”, “About”, and “Contact US”. Each of them includes a hyperlink which will link to the relevant page.

The result:

Step Four: Add Collapsed Code and Hamburger Button

In order to make the nav-bar responsive, we need to add collapsed code and hamburger button code.

For example, if we want all the nav-bar list content collapse in mobile view, we need to insert the“collapse navbar-collapse” class value in the div tag between the navbar-header and the ul list code.

Then, we copy the hamburger button code from the Bootstrap default nav-bar code and insert it under the 

 <div class="navbar-header">.

.In addition, we also need to link the JS and Jquery codes to let the nav-bar take action. (The JS and Jquery code links are provided by instructor. )

The result shows a mobile view nav-bar. As I click on the right hamburger button, the list items show up.