---

Search posts under Bootstrap:

---

navbar default in Bootstrap

How to create default navigtional bar using Bootstrap?

navbar default

Bootstrap creates standard navigation bar using navbar-default in the nav element

 <h2>Navbar default</h2>
    <nav class="navbar navbar-default">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">TechFunda</a>
        </div>
        <div>
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">DotNetFunda</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                        ITFunda
                        <b class="caret"></b>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Online training</a></li>
                        <li><a href="#">Offline training</a></li>
                        <li><a href="#">Corporate training</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </nav>

• In the above code snippet we created class attribute value as navbar navbar-default  in the nav element which shows the default color to given values
• In the next line we have class attribute value as  navbar-header in div, we have value of class attribute navbar-brand  in the anchor tag <a> which is used to increase the font-size of the value TechFunda 
• In the next line we are having class attribute value as  nav navbar-nav in the ul element, we created list value as DotNetFunda with class attribute  active in the li element 
• In the next line we created dropdown for the value ITFunda, we have class attribute dropdown in the li element, we have anchor tag in the li element with value ITFunda and class attribute value as  dropdown-toggle in the <a> tag and data-toggle as dropdown, class attribute caret in the b element is used to keep the symbol after the value   
• In the next line we have the dropdown values of ITFunda with class attribute  value as dropdown-menu in the ul element with list values in the li element as online training, offline training and corporate training in the li element