Cheap VPS & Xen Server


Residential Proxy Network - Hourly & Monthly Packages

Bootstrap Tabs and Pills

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:

  1. <!DOCTYPE html>
  2. <html lang=“en”>
  3. <head>
  4.   <title>Bootstrap Case</title>
  5.   <meta charset=“utf-8”>
  6.   <meta name=“viewport” content=“width=device-width, initial-scale=1”>
  7.   <link rel=“stylesheet” href=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css”>
  9. </head>
  10. <body>
  12. <div class=“container”>
  13.   <h3>Inline List</h3>
  14.   <ul class=“list-inline”>
  15.     <li><a href=“#”>Home</a></li>
  16.     <li><a href=“#”>Menu 1</a></li>
  17.     <li><a href=“#”>Menu 2</a></li>
  18.     <li><a href=“#”>Menu 3</a></li>
  19.   </ul>
  20. </div>
  21. <script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js”></script>
  22. <script src=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js”></script>
  23. </body>
  24. </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:

  1. <!DOCTYPE html>
  2. <html lang=“en”>
  3. <head>
  4.   <title>Bootstrap Case</title>
  5.   <meta charset=“utf-8”>
  6.   <meta name=“viewport” content=“width=device-width, initial-scale=1”>
  7.   <link rel=“stylesheet” href=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css”>
  9. </head>
  10. <body>
  12. <div class=“container”>
  13.   <h3>Tabs</h3>
  14.   <ul class=“nav nav-tabs”>
  15.     <li class=“active”><a href=“#”>Home</a></li>
  16.     <li><a href=“#”>Menu 1</a></li>
  17.     <li><a href=“#”>Menu 2</a></li>
  18.     <li><a href=“#”>Menu 3</a></li>
  19.   </ul>
  20.   <br>
  22. </div>
  23. <script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js”></script>
  24. <script src=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js”></script>
  25. </body>
  26. </html>

Test it Now

Bootstrap Tabs with Dropdown Menu

You can also use tabs in a dropdown menu.

See this example:

  1. <!DOCTYPE html>
  2. <html lang=“en”>
  3. <head>
  4.   <title>Bootstrap Case</title>
  5.   <meta charset=“utf-8”>
  6.   <meta name=“viewport” content=“width=device-width, initial-scale=1”>
  7.   <link rel=“stylesheet” href=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css”>
  9. </head>
  10. <body>
  12. <div class=“container”>
  13.   <h3>Tabs With Dropdown Menu</h3>
  14.   <ul class=“nav nav-tabs”>
  15.     <li class=“active”><a href=“#”>Home</a></li>
  16.     <li class=“dropdown”>
  17.       <a class=“dropdown-toggle” data-toggle=“dropdown” href=“#”>Menu 1 <span class=“caret”></span></a>
  18.       <ul class=“dropdown-menu”>
  19.         <li><a href=“#”>Submenu 1-1</a></li>
  20.         <li><a href=“#”>Submenu 1-2</a></li>
  21.         <li><a href=“#”>Submenu 1-3</a></li>
  22.       </ul>
  23.     </li>
  24.     <li><a href=“#”>Menu 2</a></li>
  25.     <li><a href=“#”>Menu 3</a></li>
  26.   </ul>
  27. </div>
  28. <script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js”></script>
  29. <script src=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js”></script>
  30. </body>
  31. </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:

  1. <!DOCTYPE html>
  2. <html lang=“en”>
  3. <head>
  4.   <title>Bootstrap Case</title>
  5.   <meta charset=“utf-8”>
  6.   <meta name=“viewport” content=“width=device-width, initial-scale=1”>
  7.   <link rel=“stylesheet” href=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css”>
  9. </head>
  10. <body>
  12. <div class=“container”>
  13.   <h2>Dynamic Tabs</h2>
  14.   <ul class=“nav nav-tabs”>
  15.     <li class=“active”><a data-toggle=“tab” href=“#home”>Home</a></li>
  16.     <li><a data-toggle=“tab” href=“#menu1”>Menu 1</a></li>
  17.     <li><a data-toggle=“tab” href=“#menu2”>Menu 2</a></li>
  18.     <li><a data-toggle=“tab” href=“#menu3”>Menu 3</a></li>
  19.   </ul>
  21.   <div class=“tab-content”>
  22.     <div id=“home” class=“tab-pane fade in active”>
  23.       <h3>HOME</h3>
  24.       <p>A markup language is a programming language that is used make text more
  25.            interactive and dynamic. It can turn a text into images, tables, links etc.</p>
  26.     </div>
  27.     <div id=“menu1” class=“tab-pane fade”>
  28.       <h3>Menu 1</h3>
  29.       <p>Java is a high level, robust, secured and object-oriented programming language.</p>
  30.     </div>
  31.     <div id=“menu2” class=“tab-pane fade”>
  32.       <h3>Menu 2</h3>
  33.       <p>SQL is just a query language, it is not a database. To perform SQL queries,
  34.      you need to install any database for example Oracle, MySQL, MongoDB, PostGre SQL, SQL Server, DB2 etc.</p>
  35.     </div>
  36.     <div id=“menu3” class=“tab-pane fade”>
  37.       <h3>Menu 3</h3>
  38.       <p>The C Language is developed for creating system applications that direct
  39.       interacts to the hardware devices such as drivers, kernals etc.</p>
  40.     </div>
  41.   </div>
  42. </div>
  43. <script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js”></script>
  44. <script src=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js”></script>
  45. </body>
  46. </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:

  1. <!DOCTYPE html>
  2. <html lang=“en”>
  3. <head>
  4.   <title>Bootstrap Case</title>
  5.   <meta charset=“utf-8”>
  6.   <meta name=“viewport” content=“width=device-width, initial-scale=1”>
  7.   <link rel=“stylesheet” href=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css”>
  9. </head>
  10. <body>
  12. <div class=“container”>
  13.   <h3>Pills</h3>
  14.   <ul class=“nav nav-pills”>
  15.     <li class=“active”><a href=“#”>Home</a></li>
  16.     <li><a href=“#”>Menu 1</a></li>
  17.     <li><a href=“#”>Menu 2</a></li>
  18.     <li><a href=“#”>Menu 3</a></li>
  19.   </ul>
  20. </div>
  21. <script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js”></script>
  22. <script src=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js”></script>
  23. </body>
  24. </html>

Test it Now

Bootstrap Vertical Pills

Add the .nav-stacked class to display the pills vertically.

See this example:

  1. <!DOCTYPE html>
  2. <html lang=“en”>
  3. <head>
  4.   <title>Bootstrap Case</title>
  5.   <meta charset=“utf-8”>
  6.   <meta name=“viewport” content=“width=device-width, initial-scale=1”>
  7.   <link rel=“stylesheet” href=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css”>
  9. </head>
  10. <body>
  12. <div class=“container”>
  13.   <h3>Vertical Pills</h3>
  14.   <ul class=“nav nav-pills nav-stacked”>
  15.     <li class=“active”><a href=“#”>Home</a></li>
  16.     <li><a href=“#”>Menu 1</a></li>
  17.     <li><a href=“#”>Menu 2</a></li>
  18.     <li><a href=“#”>Menu 3</a></li>
  19.   </ul>
  20. </div>
  21. <script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js”></script>
  22. <script src=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js”></script>
  23. </body>
  24. </html>

Test it Now

Bootstrap Pills with Dropdown Menu

You can also use dropdown menu with pills.

See this example:

  1. <!DOCTYPE html>
  2. <html lang=“en”>
  3. <head>
  4.   <title>Bootstrap Case</title>
  5.   <meta charset=“utf-8”>
  6.   <meta name=“viewport” content=“width=device-width, initial-scale=1”>
  7.   <link rel=“stylesheet” href=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css”>
  9. </head>
  10. <body>
  12. <div class=“container”>
  13.   <h3>Pills With Dropdown Menu</h3>
  14.   <ul class=“nav nav-pills nav-stacked”>
  15.     <li class=“active”><a href=“#”>Home</a></li>
  16.     <li class=“dropdown”>
  17.       <a class=“dropdown-toggle” data-toggle=“dropdown” href=“#”>Menu 1 <span class=“caret”></span></a>
  18.       <ul class=“dropdown-menu”>
  19.         <li><a href=“#”>Submenu 1-1</a></li>
  20.         <li><a href=“#”>Submenu 1-2</a></li>
  21.         <li><a href=“#”>Submenu 1-3</a></li>
  22.       </ul>
  23.     </li>
  24.     <li><a href=“#”>Menu 2</a></li>
  25.     <li><a href=“#”>Menu 3</a></li>
  26.   </ul>
  27. </div>
  28. <script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js”></script>
  29. <script src=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js”></script>
  30. </body>
  31. </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:

  1. <!DOCTYPE html>
  2. <html lang=“en”>
  3. <head>
  4.   <title>Bootstrap Case</title>
  5.   <meta charset=“utf-8”>
  6.   <meta name=“viewport” content=“width=device-width, initial-scale=1”>
  7.   <link rel=“stylesheet” href=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css”>
  9. </head>
  10. <body>
  12. <div class=“container”>
  13.   <h2>Dynamic Pills</h2>
  14.   <ul class=“nav nav-pills”>
  15.     <li class=“active”><a data-toggle=“pill” href=“#home”>Home</a></li>
  16.     <li><a data-toggle=“pill” href=“#menu1”>Menu 1</a></li>
  17.     <li><a data-toggle=“pill” href=“#menu2”>Menu 2</a></li>
  18.     <li><a data-toggle=“pill” href=“#menu3”>Menu 3</a></li>
  19.   </ul>
  21.   <div class=“tab-content”>
  22.     <div id=“home” class=“tab-pane fade in active”>
  23.       <h3>HOME</h3>
  24.       <p>A markup language is a programming language that is used make text more interactive and
  25.         dynamic. It can turn a text into images, tables, links etc.</p>
  26.     </div>
  27.     <div id=“menu1” class=“tab-pane fade”>
  28.       <h3>Menu 1</h3>
  29.       <p>Java is a high level, robust, secured and object-oriented programming language.</p>
  30.     </div>
  31.     <div id=“menu2” class=“tab-pane fade”>
  32.       <h3>Menu 2</h3>
  33.       <p>SQL is just a query language, it is not a database. To perform SQL queries,
  34.       you need to install any database for example Oracle, MySQL, MongoDB, PostGre SQL, SQL Server, DB2 etc.</p>
  35.     </div>
  36.     <div id=“menu3” class=“tab-pane fade”>
  37.       <h3>Menu 3</h3>
  38.       <p>The C Language is developed for creating system applications that direct
  39.        interacts to the hardware devices such as drivers, kernals etc.</p>
  40.     </div>
  41.   </div>
  42. </div>
  43. <script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js”></script>
  44. <script src=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js”></script>
  45. </body>
  46. </html>

Comments

comments

Filed UnderBootstrap Bootstrap Advance Java

July 25, 2016Sraboni Mandal0 Comments

Tagged With


Recent Tutorials

How to record a region of your desktop as animated GIF on Linux

How to record a region of your desktop as animated GIF on Linux

No thumbnail available

How to install xemacs21-mulesupport on Debian Unstable (Sid)

No thumbnail available

How to install systemd-container on Debian Unstable (Sid)

No thumbnail available

How to install scalable-cyrfonts-tex on Debian Unstable (Sid)

No thumbnail available

How to install libqt5widgets5 on Debian Unstable (Sid)


Tutorials You May Like

Cookies Login and Logout

Cookies Login and Logout

No thumbnail available

How to install python-cycler-doc on Debian Unstable (Sid)

No thumbnail available

How to install python-spectral-cube on Debian Unstable (Sid)

No thumbnail available

How to install tarantool-lts-mysql-module on Debian Unstable (Sid)

Securing X2Go On Ubuntu Precise With WiKID Two-Factor Authentication

Securing X2Go On Ubuntu Precise With WiKID Two-Factor Authentication


More Tutorials

No thumbnail available

How to install pulseaudio-module-lirc on Debian Unstable (Sid)

No thumbnail available

How to install python-pytest on Debian Unstable (Sid)

No thumbnail available

How to install php5-remctl on Debian Unstable (Sid)

No thumbnail available

How to install php7.0-bz2 on Debian Unstable (Sid)

No thumbnail available

How to install python-twisted-libravatar on Debian Unstable (Sid)