Dropdowns

Button groups

Button Sizes

Large

Small

.btn-toolbar .btn-group


 

.btn-group.btn-group-justified

Left
Dropdown
Middle Right

.btn-group.dropup

Input groups

.input-group

.input-group-addon

.input-group-lg

Addon Addon

.input-group-sm

Addon Addon

Nav Tabs

Nav Tabs Justified

Nav Pills

Breadcrumbs

  1. Home
  2. Library
  3. Data

Pagination

Button Sizes

Large

Small

Pager

Labels

Label Default Label Primary Label Success Label Info Label Warning Label Danger Label inverse

Badge Default Badge Primary Badge Success Badge Info Badge Warning Badge Danger Badge inverse

Chips Default Chips Primary Chips Success Chips Info Chips Warning Chips Danger Chips inverse

Jumbotron

Heading

Paragraph

Button

Page header

Example page header Subtext for header

Thumbnails

.thumbnail

thumbnail

.caption h3

Paragraph

Button

.thumbnail

thumbnail

Caption

Paragraph

Button

.thumbnail

thumbnail

Caption

Paragraph

Button

.thumbnail

thumbnail

Caption

Paragraph

Button

Alerts

Alert Dismissible

Something happened

The form was not submitted because of a network error. Please check the Support Requests page or try again.

Something happened

The form was not submitted because of a network error. Please check the Support Requests page or try again.

Something happened

The form was not submitted because of a network error. Please check the Support Requests page or try again.

Something happened

The form was not submitted because of a network error. Please check the Support Requests page or try again.

Something happened

The form was not submitted because of a network error. Please check the Support Requests page or try again.

Something happened

The form was not submitted because of a network error. Please check the Support Requests page or try again.

Something happened

The form was not submitted because of a network error. Please check the Support Requests page or try again.

Alert Sizes

.alert.alert-success a.alert-link
.alert.alert-info a.alert-link

Progress bars

.progress

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

.progress .progress-bar.progress-bar-striped

.progress.active .progress-bar.progress-bar-striped

Media object

.media
.media-object

.media-body h4.media-heading

← a.media-left img.media-object

.media
.media-object

.media-body h4.media-heading

← a.media-left.media-middle img.media-object
.media-object

.media .media-body h4.media-heading

← a.media-left img.media-object

ul.media-list
  • .media-object

    li.media .media-body h4.media-heading

    ← a.media-left.media-bottom img.media-object
    .media-object

    .media .media-body h4.media-heading

    ← a.media-left img.media-object

  • li.media .media-body h4.media-heading

    a.media-right img.media-object →
    .media-object

List group

ul.list-group

  • li.list-group-item
  • List item #2 .badge
  • List item #3

div.list-group

a.list-group-item a.list-group-item.list-group-item-success a.list-group-item.list-group-item-info a.list-group-item.list-group-item-warning a.list-group-item.list-group-item-danger

div.list-group

a.list-group-item.active a.list-group-item.list-group-item-success.active a.list-group-item.list-group-item-info.active a.list-group-item.list-group-item-warning.active a.list-group-item.list-group-item-danger.active

div.list-group

h4.list-group-item-heading

p.list-group-item-text

List group item heading

Paragraph

Panels

Panel Title
I'm a paragraph. Click here to add your own text and edit me. It’s easy. Just click “Edit Text” or double click me to add your own content and make changes to the font. Feel free to drag and drop me anywhere you like on your page. I’m a great place for you to tell a story and let your users know a little more about you.
Panel Footer

Panel Default

Panel Title
I'm a paragraph. Click here to add your own text and edit me. It’s easy. Just click “Edit Text” or double click me to add your own content and make changes to the font. Feel free to drag and drop me anywhere you like on your page. I’m a great place for you to tell a story and let your users know a little more about you.
Panel Footer

Panel Inverse

Panel Title
I'm a paragraph. Click here to add your own text and edit me. It’s easy. Just click “Edit Text” or double click me to add your own content and make changes to the font. Feel free to drag and drop me anywhere you like on your page. I’m a great place for you to tell a story and let your users know a little more about you.
Panel Footer

Panel Success

Panel Title
I'm a paragraph. Click here to add your own text and edit me. It’s easy. Just click “Edit Text” or double click me to add your own content and make changes to the font. Feel free to drag and drop me anywhere you like on your page. I’m a great place for you to tell a story and let your users know a little more about you.
Panel Footer

Panel Info

Panel Title
I'm a paragraph. Click here to add your own text and edit me. It’s easy. Just click “Edit Text” or double click me to add your own content and make changes to the font. Feel free to drag and drop me anywhere you like on your page. I’m a great place for you to tell a story and let your users know a little more about you.
Panel Footer

Panel Warning (with table)

Panel Title
HeaderHeaderHeader
DataDataData
DataDataData

Panel Danger (with list group)

Panel Title
  • List item
  • List item
  • List item

Wells

.well.well-lg
.well
.well.well-sm