Dropdowns

Example


Headers

Disabled menu items

Button groups

Basic example


Button toolbar

Sizing

Nesting

Vertical variation

Justified button groups

With <a> elements

Left Middle Right

Left Middle
Dropdown

With <button> elements

Button dropdowns

Single button dropdowns

Split button dropdowns

Sizing

Dropup variation

Input groups

Basic example

@

.00

$ .00

Sizing

@

@

@

Checkboxes and radio addons


Button addons


Buttons with dropdowns


Segmented buttons


Navs

Tabs


Pills


Justified


Disabled links

Using dropdowns

Tabs with dropdowns


Pills with dropdowns

Navbar

Default navbar

Forms

Buttons

Text

Non-nav links

Fixed to top

Fixed to bottom

Static top

Inverted navbar

Breadcrumbs

  1. Home
  1. Home
  2. Library
  1. Home
  2. Library
  3. Data

Pagination

Default pagination




Disabled and active states



Sizing


Pager

Default example


Aligned links


Optional disabled state

Labels

Example

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New
Example heading New

Available variations

Default Primary Success Info Warning Danger

Badges

Inbox 42

Adapts to active nav states





Jumbotron

Hello, world!

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

Learn more

Page header

Example page header Subtext for header

Thumbnails

Default example

100%x180
100%x180
100%x180
100%x180

Custom content

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

Alerts

Examples

Dismissible alerts

Links in alerts

Progress bars

Basic example

60% Complete

With label

60%

Low percentages

0%
2%

Contextual alternatives

40% Complete (success)
20% Complete
60% Complete (warning)
80% Complete (danger)

Striped

40% Complete (success)
20% Complete
60% Complete (warning)
80% Complete (danger)

Animated

45% Complete

Stacked

35% Complete (success)
20% Complete (warning)
10% Complete (danger)

Standard progress bar

40% Complete (info)
20% Complete (success)
60% Complete (warning)

Indeterminate progress bar

100% Complete
100% Complete (success)
100% Complete (warning)

Small progress bar

40% Complete (success)
20% Complete
60% Complete (warning)

Media object

Default media

64x64

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
64x64

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
64x64

Nested media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Media list

List group

Basic example

Badges

Linked items

Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum at eros

Disabled items

Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum at eros

Contextual classes

  • Dapibus ac facilisis in
  • Cras sit amet nibh libero
  • Porta ac consectetur ac
  • Vestibulum at eros
Dapibus ac facilisis in Cras sit amet nibh libero Porta ac consectetur ac Vestibulum at eros

Custom content

List group item heading

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

List group item heading

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

List group item heading

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Panels

Basic example

Basic panel example

Panel with heading

Panel heading without title
Panel content
Panel title
Panel content

Panel with footer

Panel content
Panel footer

Contextual alternatives

Panel title
Panel content
Panel title
Panel content
Panel title
Panel content
Panel title
Panel content
Panel title
Panel content

With tables

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

Panel heading
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
Blahblah

With list groups

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

Responsive embed

Wells

Default well

Look, I'm in a well!

Optional classes

Look, I'm in a large well!

Look, I'm in a small well!