Bootstrap Tabs and Pills

Menus

Most web pages have some kind of a menu.

In HTML, a menu is often defined in an unordered list <ul> (and styled afterwards), like this:

<ul>  <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>

Tabs

• Home
• Menu 1
• Menu 2
• Menu 3

Tabs are created with <ul class="nav nav-tabs">:

Tip: Also mark the current page with <li class="active">.

The following example creates navigation tabs:

<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>

Pills

Pills are created with <ul class="nav nav-pills">. Also mark the current page with <li class="active">:

<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>

Bootstrap Dropdowns

Basic Dropdown

A dropdown menu is a toggleable menu that allows the user to choose one value from a predefined list:

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
  <span class="caret"></span></button>
  <ul class="dropdown-menu">
    <li><a href="#">HTML</a></li>
    <li><a href="#">CSS</a></li>
    <li><a href="#">JavaScript</a></li>
  </ul>
</div>

Bootstrap Panels

Panels

A panel in bootstrap is a bordered box with some padding around its content:

A Basic Panel

Panels are created with the .panel class, and content inside the panel has a .panel-body class:

<div class="panel panel-default">  <div class="panel-body">A Basic Panel</div></div>

Panel Heading

Panel Heading

Panel Content

The .panel-heading class adds a heading to the panel:

<div class="panel panel-default">  <div class="panel-heading">Panel Heading</div>  <div class="panel-body">Panel Content</div></div> 

Panel Footer

Panel Content

Panel Footer

The .panel-footer class adds a footer to the panel:

<div class="panel panel-default">  <div class="panel-body">Panel Content</div>  <div class="panel-footer">Panel Footer</div></div> 

Bootstrap List Groups

Basic List Groups

The most basic list group is an unordered list with list items:

• First item
• Second item
• Third item

To create a basic list group, use an <ul> element with class .list-group, and <li> elements with class .list-group-item:

<ul class="list-group">  <li class="list-group-item">First item</li>  <li class="list-group-item">Second item</li>  <li class="list-group-item">Third item</li></ul>

Contextual Classes

Contextual classes can be used to color list items:

• First item
• Second item
• Third item
• Fourth item

The classes for coloring list-items are: .list-group-item-success, list-group-item-info, list-group-item-warning, and .list-group-item-danger:

<ul class="list-group">  <li class="list-group-item list-group-item-success">First item</li>  <li class="list-group-item list-group-item-info">Second item</li>  <li class="list-group-item list-group-item-warning">Third item</li>  <li class="list-group-item list-group-item-danger">Fourth item</li></ul> 

Breadcrumbs

Another form for pagination, is breadcrumbs:

1. Home /
 
2. Private /
 
3. Pictures /
 
4. Vacation

The .breadcrumb class indicates the current page's location within a navigational hierarchy:

<ul class="breadcrumb">  <li><a href="#">Home</a></li>  <li><a href="#">Private</a></li>  <li><a href="#">Pictures</a></li>  <li class="active">Vacation</li> </ul>

Bootstrap Pagination

Basic Pagination

If you have a web site with lots of pages, you may wish to add some sort of pagination to each page.

A basic pagination in Bootstrap looks like this:

• 1
• 2
• 3
• 4
• 5

To create a basic pagination, add the .pagination class to an <ul> element:

<ul class="pagination">  <li><a href="#">1</a></li>  <li><a href="#">2</a></li>  <li><a href="#">3</a></li>  <li><a href="#">4</a></li>  <li><a href="#">5</a></li></ul>

Active State

The active state shows what is the current page:

• 1
• 2
• 3
• 4
• 5

Add class .active to let the user know which page he/she is on:

<ul class="pagination">  <li><a href="#">1</a></li>  <li class="active"><a href="#">2</a></li>  <li><a href="#">3</a></li>  <li><a href="#">4</a></li>  <li><a href="#">5</a></li></ul> 

Bootstrap Progress Bars

Basic Progress Bar

A progress bar can be used to show a user how far along he/she is in a process.

Bootstrap provides several types of progress bars.

A default progress bar in Bootstrap looks like this:

70% Complete

To create a default progress bar, add a .progress class to a <div> element:

<div class="progress">  <div class="progress-bar" role="progressbar" aria-valuenow="70"
  aria-valuemin="0" aria-valuemax="100" style="width:70%">  aria-valuemin="0" aria-valuemax="100" style="width:70%">    <span class="sr-only">70% Complete</span>  </div></div>

Progress Bar With Label

A progress bar with a label looks like this:

70%

Remove the .sr-only class from the progress bar to show a visible percentage:

<div class="progress">  <div class="progress-bar" role="progressbar" aria-valuenow="70"
  aria-valuemin="0" aria-valuemax="100" style="width:70%">  aria-valuemin="0" aria-valuemax="100" style="width:70%">    70%  </div></div> 

Colored Progress Bars

Contextual classes are used to provide "meaning through colors".

The contextual classes that can be used with progress bars are:

• .progress-bar-success
• .progress-bar-info
• .progress-bar-warning
• .progress-bar-danger

40% Complete (success)

50% Complete (info)

60% Complete (warning)

70% Complete (danger)

The following example shows how to create progress bars with the different contextual classes:

<div class="progress">  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40"
  aria-valuemin="0" aria-valuemax="100" style="width:40%">  aria-valuemin="0" aria-valuemax="100" style="width:40%">    40% Complete (success)  </div></div>
<div class="progress">  <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="50"
  aria-valuemin="0" aria-valuemax="100" style="width:50%">  aria-valuemin="0" aria-valuemax="100" style="width:50%">    50% Complete (info)  </div></div>
<div class="progress">  <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60"
  aria-valuemin="0" aria-valuemax="100" style="width:60%">  aria-valuemin="0" aria-valuemax="100" style="width:60%">    60% Complete (warning)  </div></div>
<div class="progress">  <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="70"
  aria-valuemin="0" aria-valuemax="100" style="width:70%">  aria-valuemin="0" aria-valuemax="100" style="width:70%">    70% Complete (danger)  </div></div>