top button
Flag Notify
    Connect to us
      Facebook Login
      Site Registration Why to Join

Facebook Login
Site Registration

How to create a navbar in Bootstrap?

0 votes
15 views
How to create a navbar in Bootstrap?
posted Jun 30, 2017 by Debaprasad Maity

Share this question
Facebook Share Button Twitter Share Button Google+ Share Button LinkedIn Share Button Multiple Social Share Button

1 Answer

0 votes

You can use the Bootstrap navbar component to create responsive navigation header for your website or application. These responsive navbar initially collapsed on devices having small viewports like cell-phones but expand when user click the toggle button. However, it will be horizontal as normal on the medium and large devices like laptop or desktop.

Default Navbar

To create a default navbar −

Add the classes .navbar, .navbar-default to the <nav> tag.

Add role = "navigation" to the above element, to help with accessibility.

Add a header class .navbar-header to the <div> element. Include an <a> element with class .navbar-brand. This will give the text a slightly larger size.

To add links to the navbar, simply add an unordered list with the classes of .nav, .navbar-nav.

Example

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </div>
</nav>

Preview

enter image description here

answer Jul 3, 2017 by Sahana
Contact Us
+91 9880187415
sales@queryhome.net
support@queryhome.net
#280, 3rd floor, 5th Main
6th Sector, HSR Layout
Bangalore-560102
Karnataka INDIA.
QUERY HOME
...