Bootstrap Nav Classes Code Example


Example 1: bootstrap navbar

<nav class="navbar navbar-expand-lg navbar-light bg-light">   <a class="navbar-brand" href="#">Navbar</a>   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">     <span class="navbar-toggler-icon"></span>   </button>   <div class="collapse navbar-collapse" id="navbarNavAltMarkup">     <div class="navbar-nav">       <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>       <a class="nav-item nav-link" href="#">Features</a>       <a class="nav-item nav-link" href="#">Pricing</a>       <a class="nav-item nav-link disabled" href="#">Disabled</a>     </div>   </div> </nav>

Example 2: bootstrap nav

<ul class="nav nav-tabs" id="myTab" role="tablist">   <li class="nav-item">     <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>   </li>   <li class="nav-item">     <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>   </li>   <li class="nav-item">     <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>   </li> </ul> <div class="tab-content" id="myTabContent">   <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>   <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>   <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div> </div>

Example 3: bootstrap navbar

<nav class="navbar navbar-expand-lg navbar-light bg-light">   <a class="navbar-brand" href="#">Navbar</a>   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">     <span class="navbar-toggler-icon"></span>   </button>   <div class="collapse navbar-collapse" id="navbarNav">     <ul class="navbar-nav">       <li class="nav-item active">         <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>       </li>       <li class="nav-item">         <a class="nav-link" href="#">Features</a>       </li>       <li class="nav-item">         <a class="nav-link" href="#">Pricing</a>       </li>       <li class="nav-item">         <a class="nav-link disabled" href="#">Disabled</a>       </li>     </ul>   </div> </nav>

Comments

Popular posts from this blog

Are Regular VACUUM ANALYZE Still Recommended Under 9.1?

Can Feynman Diagrams Be Used To Represent Any Perturbation Theory?