Home Whiteboard Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

Create Default Bootstrap Navbar

Bootstrap Web Development CSS Framework

Follow the below given steps in Bootstrap to create 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.

You can try to run the following code to create default navbar −

Example

Live Demo

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Example</title>
      <link href = "/bootstrap/css/bootstrap.min.css" rel = "stylesheet">
      <script src = "/scripts/jquery.min.js"></script>
      <script src = "/bootstrap/js/bootstrap.min.js"></script>
   </head>
   <body style = "background: #F5CBA7;">
      <nav class = "navbar navbar-default" role = "navigation">
         <div class = "navbar-header">
            <a class = "navbar-brand" href = "#">Cars</a>
         </div>
         <div>
            <ul class = "nav navbar-nav">
               <li class = "active"><a href = "#">BMW</a></li>
               <li><a href = "#">Audi</a></li>
               <li class = "dropdown">
               <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
                  SUV
                  <b class = "caret"></b>
               </a>
               <ul class = "dropdown-menu">
                  <li><a href = "#">Creta</a></li>
                  <li><a href = "#">Scorpio</a></li>
               </ul>
               </li>
            </ul>
         </div>
      </nav>
   </body>
</html>
Updated on: 2020-06-12T16:40:17+05:30

604 Views

Learn More in Our Tutorials

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements