Skip to content

Components

Some handy tools to help you enhance your site.

PILLS

To use pills use .nav .nav-pills.

Basic example

<ul class="nav nav-pills">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li>
</ul>

Pills are also vertically stackable. Just add .nav-stacked.

<ul class="nav nav-pills nav-stacked">
...
</ul>

Justified

Easily make tabs or pills equal widths of their parent at screens wider than 768px with .nav-justified. On smaller screens, the nav links are stacked.

Safari and responsive justified navs

As of v7.0.1, Safari exhibits a bug in which resizing your browser horizontally causes rendering errors in the justified nav that are cleared upon refreshing.

<ul class="nav nav-tabs nav-justified" role="tablist">
...
</ul>
<ul class="nav nav-pills nav-justified">
...
</ul>

While not always necessary, sometimes you need to put your DOM in a box. For those situations, try the panel component.

Basic example

By default, all the .panel does is apply some basic border and padding to contain some content.

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

Panel with heading

Easily add a heading container to your panel with .panel-heading. You may also include any <h1><h6> with a .panel-title class to add a pre-styled heading.

For proper link coloring, be sure to place links in headings within .panel-title.

Panel heading without title
Panel content

Panel title

Panel content
<div class="panel panel-default">
<div class="panel-heading">Panel heading without title</div>
<div class="panel-body">
Panel content
</div>
</div>

<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>

Wrap buttons or secondary text in .panel-footer. Note that panel footers do not inherit colors and borders when using contextual variations as they are not meant to be in the foreground.

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

Contextual alternatives

Like other components, easily make a panel more meaningful to a particular context by adding any of the contextual state classes.

PANEL TITLE

Panel content

PANEL TITLE

Panel content

PANEL TITLE

Panel content

PANEL TITLE

Panel content

PANEL TITLE

Panel content
<div class="panel panel-primary">...</div>
<div class="panel panel-success">...</div>
<div class="panel panel-info">...</div>
<div class="panel panel-warning">...</div>
<div class="panel panel-danger">...</div>

With tables

Add any non-bordered .table within a panel for a seamless design. If there is a .panel-body, we add an extra border to the top of the table for separation.

Panel heading

Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<div class="panel-body">
<p>...</p>
</div>

<!-- Table -->
<table class="table">
...
</table>
</div>

If there is no panel body, the component moves from panel header to table without interruption.

Panel heading
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>

<!-- Table -->
<table class="table">
...
</table>
</div>

With list groups

Easily include full-width list groups within any panel.

Panel heading

Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<div class="panel-body">
<p>...</p>
</div>

<!-- List group -->
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</div>

Extend Bootstrap’s grid system with the thumbnail component to easily display grids of images, videos, text, and more.

Default example

By default, Bootstrap’s thumbnails are designed to showcase linked images with minimal required markup.

100%x180
100%x180
100%x180
100%x180
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img data-src="holder.js/100%x180" alt="...">
</a>
</div>
...
</div>

Custom content

With a bit of extra markup, it’s possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.

100%x200

Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Button Button

100%x200

Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Button Button

100%x200

Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Button Button

<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img data-src="holder.js/300x300" alt="...">
<div class="caption">
<h3>Thumbnail label</h3>
<p>...</p>
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
</div>
</div>
</div>
</div>

A lightweight, flexible component that can optionally extend the entire viewport to showcase key content on your site.

Hello, world!

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

Learn more

<div class="jumbotron">
<h1>Hello, world!</h1>
<p>...</p>
<p><a class="btn btn-primary btn-lg" role="button">Learn more</a></p>
</div>

To make the jumbotron full width, and without rounded corners, place it outside all .containers and instead add a .container within.

<div class="jumbotron">
<div class="container">
...
</div>
</div>

A simple shell for an h2 to appropriately space out and segment sections of content on a page. It can utilize the h2‘s default small element, as well as most other components (with additional styles).

<div class="page-header">
<h2>Example page header <small>Subtext for header</small></h2>
</div>

Want to learn more?

The state templates are based on Bootstrap v3.1.1., licensed under MIT. For more information, go to getbootstrap.com.
We are using the PayPal accessibility plugin to enhance the accessibility of the templates.