Home
Tutorials
Microsoft Technologies Tutorials
Java Programming Tutorials
Web Designing Tutorials
Script Programming Tutorials
Database Programming Tutorials
Mobile Technologies Tutorials
Other Programming Tutorials
Examples
Articles
Tools
News
Bootstrap Pills with Dropdown Menu Example
Keywords : pills, bootstrap, bootstrap pill menu, bootstrap pills with dropdown menu, bootstrap dropdown menu example, bootstrap pills menu example, bootstrap pills dropdown menus, bootstrap navbar example
Example
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Pills with Dropdown Menu Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <style> .bcontent { margin-top: 10px; } </style> </head> <body> <div class="container bcontent"> <h2>Bootstrap Pills with Dropdown Menu</h2> <hr /> <ul class="nav nav-pills"> <li class="nav-item"> <a class="nav-link active" href="#">Home</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Tutorials</a> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Microsoft</a> <a class="dropdown-item" href="#">Java</a> <a class="dropdown-item" href="#">Database</a> </div> </li> <li class="nav-item"> <a class="nav-link" href="#">Articles</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Contact</a> </li> </ul> </div> </body> </html>
Click Here to See Result
Result
Previous
Next