How to create Responsive Navbar with Bootstrap for Website Development

How to create Responsive Navbar with Bootstrap for Website Development

Hello and welcome to the first steps towards bootstrapping , Yes in this chapter I am going to start a very fundamental and basic component of a website, a “navbar”.  Do you ever think the use of navbar. Do you ever think a role of navigation in your site.

Bootstrap provides such an easy way to create a responsive mobile first navbar in your site. So without any boring discussion let’s get started!

Related Article

There are two types of navbar you can have using bootstrap:

1- Navbar-default
2- Navbar-inverse

Well I am going to teach you both with styling and with the use of forms in navbars and much more. This series of chapters are made specially for navbars so kindly follow me.

Navbar-default:

<!—Code Start-->

<header>

<!-- Logo-->

<!-- Navigation-->

<nav class="navbar-default navbar-fixed-top">

<div class="container-fluid">

<div class="navbar-header">

<button type="button" class="navbar-toggle collapsed" data-target="#nb" data-toggle="collapse" aria-expanded="false">

<span class="sr-only">Toggle Notification</span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

</button>

<a class="navbar-brand" href="#">Logo</a>

</div>

<div class="collapse navbar-collapse" id="nb">

<ul class="nav navbar-nav">

<li class="active"><a href="#">Home</a></li>

<li><a href="#">NAV2</a></li>

<li><a href="#">NAV3</a></li>

</ul>

</div>

</div>

</nav>

</header>

<!—Code End-->

Here is the Output :

So without wasting any time, I am going to describe some main aspects and classes of this code.

  • <nav class=”navbar-default navbar-fixed-top”>

-This is a bootstrap class for default-navbar while navbar-fixed-top set the navbar fixed to the top.

PS:You can also use navbar-static-stop instead of navbar-fixed-top

  • <div class=”container-fluid”>

-This class holds the Logo or Brand name set into the navbar.

<button type=”button” class=”navbar-toggle collapsed” data-target=”#nb” data-toggle=”collapse” aria-expanded=”false”>

                <span class=”sr-only”>Toggle Notification</span>

                <span class=”icon-bar”></span>

                <span class=”icon-bar”></span>

                <span class=”icon-bar”></span>

                </button>

<a class=”navbar-brand” href=”#”>Logo</a>

</div>

-Class navbar-toggle collapsed works when screen size is too small such as mobile devices and automatically makes a navbar responsive for small hand-held devices.

-data-target is a bootstrap javascript function that targets the navbar li’s.

-navbar-brand is the logo or the brand name of your site.

  • <div class=”collapse navbar-collapse” id=”nb”>

-When the navbar is collapsed to data-target attributes targets to this class.

  • <ul class=”nav navbar-nav”>

                                <li class=”active”><a href=”#”>Home</a></li>

                                <li><a href=”#”>NAV2</a></li>

                                <li><a href=”#”>NAV3</a></li>

                </ul>

Navbar-inverse

for navbar inverse use  <nav class=“navbar navbar-inverse”></nav> instead of <navbar default>Share this article if you like this and stay connected for next chapters.!!!

-This is a bootstrap class for showing contents in navbar

Download Complete Source Code  

It think this is enough discussion for navbar. In the upcoming chapters we are going to learn styling to navbar and forms in navbars. Its mean that this chapter is just a beginning to navbar so stay connected with us.

Article Written By : Asad Zaidi (Studies Software Engineering at University of Karachi, Department of Computer Science UBIT)

 

 

Comments

comments