Bootstrap Menus
Menus are used in most of the web pages. These are defined in an unordered list <ul>. You have to add the .list-inline class to <ul> to create a horizontal menu.
See this example:
- <!DOCTYPE html>
- <html lang=“en”>
- <head>
- <title>Bootstrap Case</title>
- <meta charset=“utf-8”>
- <meta name=“viewport” content=“width=device-width, initial-scale=1”>
- <link rel=“stylesheet” href=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css”>
- </head>
- <body>
- <div class=“container”>
- <h3>Inline List</h3>
- <ul class=“list-inline”>
- <li><a href=“#”>Home</a></li>
- <li><a href=“#”>Menu 1</a></li>
- <li><a href=“#”>Menu 2</a></li>
- <li><a href=“#”>Menu 3</a></li>
- </ul>
- </div>
- <script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js”></script>
- <script src=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js”></script>
- </body>
- </html>
Test it Now
Bootstrap Tabs
You can create a basic navigation tag with <ul class=”nav nav-tabs”>. You can also mark the current page with <li class=”active”>.
The following example specifies how to create a simple navigation tab.
See this example:
- <!DOCTYPE html>
- <html lang=“en”>
- <head>
- <title>Bootstrap Case</title>
- <meta charset=“utf-8”>
- <meta name=“viewport” content=“width=device-width, initial-scale=1”>
- <link rel=“stylesheet” href=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css”>
- </head>
- <body>
- <div class=“container”>
- <h3>Tabs</h3>
- <ul class=“nav nav-tabs”>
- <li class=“active”><a href=“#”>Home</a></li>
- <li><a href=“#”>Menu 1</a></li>
- <li><a href=“#”>Menu 2</a></li>
- <li><a href=“#”>Menu 3</a></li>
- </ul>
- <br>
- </div>
- <script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js”></script>
- <script src=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js”></script>
- </body>
- </html>
Test it Now
Bootstrap Tabs with Dropdown Menu
You can also use tabs in a dropdown menu.
See this example:
- <!DOCTYPE html>
- <html lang=“en”>
- <head>
- <title>Bootstrap Case</title>
- <meta charset=“utf-8”>
- <meta name=“viewport” content=“width=device-width, initial-scale=1”>
- <link rel=“stylesheet” href=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css”>
- </head>
- <body>
- <div class=“container”>
- <h3>Tabs With Dropdown Menu</h3>
- <ul class=“nav nav-tabs”>
- <li class=“active”><a href=“#”>Home</a></li>
- <li class=“dropdown”>
- <a class=“dropdown-toggle” data-toggle=“dropdown” href=“#”>Menu 1 <span class=“caret”></span></a>
- <ul class=“dropdown-menu”>
- <li><a href=“#”>Submenu 1-1</a></li>
- <li><a href=“#”>Submenu 1-2</a></li>
- <li><a href=“#”>Submenu 1-3</a></li>
- </ul>
- </li>
- <li><a href=“#”>Menu 2</a></li>
- <li><a href=“#”>Menu 3</a></li>
- </ul>
- </div>
- <script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js”></script>
- <script src=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js”></script>
- </body>
- </html>
Test it Now
Bootstrap Toggleable / Dynamic Tabs
Add the data-toggle=”tab” attribute to each link. Then add a .tab-pane class with a unique ID for every tab and wrap them inside a <div> element with class .tab-content, to make tags toggleable.
If you want the tabs to fade in and out when clicking on them, add the .fade class to .tab-pane .
See this example:
- <!DOCTYPE html>
- <html lang=“en”>
- <head>
- <title>Bootstrap Case</title>
- <meta charset=“utf-8”>
- <meta name=“viewport” content=“width=device-width, initial-scale=1”>
- <link rel=“stylesheet” href=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css”>
- </head>
- <body>
- <div class=“container”>
- <h2>Dynamic Tabs</h2>
- <ul class=“nav nav-tabs”>
- <li class=“active”><a data-toggle=“tab” href=“#home”>Home</a></li>
- <li><a data-toggle=“tab” href=“#menu1”>Menu 1</a></li>
- <li><a data-toggle=“tab” href=“#menu2”>Menu 2</a></li>
- <li><a data-toggle=“tab” href=“#menu3”>Menu 3</a></li>
- </ul>
- <div class=“tab-content”>
- <div id=“home” class=“tab-pane fade in active”>
- <h3>HOME</h3>
- <p>A markup language is a programming language that is used make text more
- interactive and dynamic. It can turn a text into images, tables, links etc.</p>
- </div>
- <div id=“menu1” class=“tab-pane fade”>
- <h3>Menu 1</h3>
- <p>Java is a high level, robust, secured and object-oriented programming language.</p>
- </div>
- <div id=“menu2” class=“tab-pane fade”>
- <h3>Menu 2</h3>
- <p>SQL is just a query language, it is not a database. To perform SQL queries,
- you need to install any database for example Oracle, MySQL, MongoDB, PostGre SQL, SQL Server, DB2 etc.</p>
- </div>
- <div id=“menu3” class=“tab-pane fade”>
- <h3>Menu 3</h3>
- <p>The C Language is developed for creating system applications that direct
- interacts to the hardware devices such as drivers, kernals etc.</p>
- </div>
- </div>
- </div>
- <script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js”></script>
- <script src=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js”></script>
- </body>
- </html>
Test it Now
Bootstrap Pills
You can create pills with <ul class=”nav nav-pills”>. You can also mark the current page with <li class=”active”>.
See this example:
- <!DOCTYPE html>
- <html lang=“en”>
- <head>
- <title>Bootstrap Case</title>
- <meta charset=“utf-8”>
- <meta name=“viewport” content=“width=device-width, initial-scale=1”>
- <link rel=“stylesheet” href=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css”>
- </head>
- <body>
- <div class=“container”>
- <h3>Pills</h3>
- <ul class=“nav nav-pills”>
- <li class=“active”><a href=“#”>Home</a></li>
- <li><a href=“#”>Menu 1</a></li>
- <li><a href=“#”>Menu 2</a></li>
- <li><a href=“#”>Menu 3</a></li>
- </ul>
- </div>
- <script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js”></script>
- <script src=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js”></script>
- </body>
- </html>
Test it Now
Bootstrap Vertical Pills
Add the .nav-stacked class to display the pills vertically.
See this example:
- <!DOCTYPE html>
- <html lang=“en”>
- <head>
- <title>Bootstrap Case</title>
- <meta charset=“utf-8”>
- <meta name=“viewport” content=“width=device-width, initial-scale=1”>
- <link rel=“stylesheet” href=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css”>
- </head>
- <body>
- <div class=“container”>
- <h3>Vertical Pills</h3>
- <ul class=“nav nav-pills nav-stacked”>
- <li class=“active”><a href=“#”>Home</a></li>
- <li><a href=“#”>Menu 1</a></li>
- <li><a href=“#”>Menu 2</a></li>
- <li><a href=“#”>Menu 3</a></li>
- </ul>
- </div>
- <script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js”></script>
- <script src=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js”></script>
- </body>
- </html>
Test it Now
Bootstrap Pills with Dropdown Menu
You can also use dropdown menu with pills.
See this example:
- <!DOCTYPE html>
- <html lang=“en”>
- <head>
- <title>Bootstrap Case</title>
- <meta charset=“utf-8”>
- <meta name=“viewport” content=“width=device-width, initial-scale=1”>
- <link rel=“stylesheet” href=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css”>
- </head>
- <body>
- <div class=“container”>
- <h3>Pills With Dropdown Menu</h3>
- <ul class=“nav nav-pills nav-stacked”>
- <li class=“active”><a href=“#”>Home</a></li>
- <li class=“dropdown”>
- <a class=“dropdown-toggle” data-toggle=“dropdown” href=“#”>Menu 1 <span class=“caret”></span></a>
- <ul class=“dropdown-menu”>
- <li><a href=“#”>Submenu 1-1</a></li>
- <li><a href=“#”>Submenu 1-2</a></li>
- <li><a href=“#”>Submenu 1-3</a></li>
- </ul>
- </li>
- <li><a href=“#”>Menu 2</a></li>
- <li><a href=“#”>Menu 3</a></li>
- </ul>
- </div>
- <script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js”></script>
- <script src=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js”></script>
- </body>
- </html>
Test it Now
Bootstrap Toggleable Dynamic Pills
It is same as toggleable dynamic tabs, the only change is the data-toggle attribute to data-toggle=”pill” .
See this example:
- <!DOCTYPE html>
- <html lang=“en”>
- <head>
- <title>Bootstrap Case</title>
- <meta charset=“utf-8”>
- <meta name=“viewport” content=“width=device-width, initial-scale=1”>
- <link rel=“stylesheet” href=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css”>
- </head>
- <body>
- <div class=“container”>
- <h2>Dynamic Pills</h2>
- <ul class=“nav nav-pills”>
- <li class=“active”><a data-toggle=“pill” href=“#home”>Home</a></li>
- <li><a data-toggle=“pill” href=“#menu1”>Menu 1</a></li>
- <li><a data-toggle=“pill” href=“#menu2”>Menu 2</a></li>
- <li><a data-toggle=“pill” href=“#menu3”>Menu 3</a></li>
- </ul>
- <div class=“tab-content”>
- <div id=“home” class=“tab-pane fade in active”>
- <h3>HOME</h3>
- <p>A markup language is a programming language that is used make text more interactive and
- dynamic. It can turn a text into images, tables, links etc.</p>
- </div>
- <div id=“menu1” class=“tab-pane fade”>
- <h3>Menu 1</h3>
- <p>Java is a high level, robust, secured and object-oriented programming language.</p>
- </div>
- <div id=“menu2” class=“tab-pane fade”>
- <h3>Menu 2</h3>
- <p>SQL is just a query language, it is not a database. To perform SQL queries,
- you need to install any database for example Oracle, MySQL, MongoDB, PostGre SQL, SQL Server, DB2 etc.</p>
- </div>
- <div id=“menu3” class=“tab-pane fade”>
- <h3>Menu 3</h3>
- <p>The C Language is developed for creating system applications that direct
- interacts to the hardware devices such as drivers, kernals etc.</p>
- </div>
- </div>
- </div>
- <script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js”></script>
- <script src=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js”></script>
- </body>
- </html>