Demo of all design features

Headings

h1 heading with underline

h1 heading With Small Text

h1 heading

h2 heading

h3 heading

h4 heading

h5 heading
h6 heading

Quotations

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

"Our Government is committed to protecting livestock health" said Minister Ritz.

Text emphasis

Ordinary paragraph that is long enough to wrap to multiple lines so that you can see how the line spacing looks.

Muted colour paragraph.

Warning colour paragraph.

Danger colour paragraph.

Info colour paragraph.

Success colour paragraph.

This is text in a <kbd> keyboard wrapper

This is text in a <code> wrapper

This is text in a <small> wrapper.

This is text in a .lead class.

This is text in a .h1 class.

This is text in a .h2 class.

This is text in a .h3 class.

This is text in a .h4 class.

This is text in a .h5 class.

This is text in a .h6 class.

Tables

Hover

Header 1 Header 2 Header 3
Data Data Data
Data Data Data
Success effect Success effect Success effect
Danger effect Danger effect Danger effect
Warning effect Warning effect Warning effect
Active effect Active effect Active effect

Striped, bordered and condensed

Header 1 Header 2 Header 3
Data Data Data
Data Data Data

Images

A generic square placeholder image with rounded corners A generic square placeholder image where only the portion within the circle circumscribed about said square is visible A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera

Margin proximity

Text...

...with medium left margin

...with an extra large left margin

...with a large top margin

Alignment and floats

Left aligned text.

Center aligned text.

Right aligned text.


Center non-text items:

A generic square placeholder image with rounded corners

Right floated text.

Left floated text.

Lists

Unordered

  • Item
  • Item
  • Item
  • Item
  • Item

Unstyled

  • Item
  • Item
  • Item
  • Item
  • Item

Ordered

  1. Item
  2. Item
  3. Item
  4. Item
  5. Item

Inline

  • Item
  • Item
  • Item
  • Item
  • Item

Lower alpha

  1. Item
  2. Item
  3. Item
  4. Item
  5. Item

Upper alpha

  1. Item
  2. Item
  3. Item
  4. Item
  5. Item

Lower roman

  1. Item
  2. Item
  3. Item
  4. Item
  5. Item

Upper roman

  1. Item
  2. Item
  3. Item
  4. Item
  5. Item

Columns

The list below is a single list that divides into columns automatically. When the screen resolution is <768px, it is one column. When the screen resolution is ≥768px it is two columns. When the screen resolution is (≥992px), it is three column. When the screen resolution is (≥1200px), it is four columns.

Current columns in this one list (resize your window to see the changes): 4 columns3 columns2 columns1 column

  • Item
  • Item
  • Item
  • Item
  • Item
  • Item
  • Item
  • Item
  • Item
  • Item
  • Item
  • Item

Definition lists

Default

Item 1
Description of item 1
Item 2
Description of item 2
Item 3
Description of item 3

Horizontal

Item 1
Description of item 1
Item 2
Description of item 2
Item 3
Description of item 3

Buttons

Large

Medium (default)

Small

Extra-small

Block level

Disabled button element

Disabled anchor element

Element types

Button group

Button toolbar

Button group sizing

Large

Medium (default)

Small

Extra-small

Justified button groups

Forms

Form groups

Legend

Inline form

Horizontal form

Validation states

Height sizing

Disabled

With optional icons

Button addons

Column sizing

Pills

Borders

On bottom

On right

On left

On top

All borders

Pagination

Default pagination

Disabled and active states

Large size

Small size

Simple pager

Disabled state

Labels

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New
Example heading New
  • Default
  • Primary
  • Success
  • Info
  • Warning
  • Danger

Progress bars and meters

Progress bars

  • 22%
  • 66%

Meters

  • 75% (normal)
  • 90% (too high)
  • 15% (too low)

Badges

Alerts

Oh snap!

Change a few things up and try submitting again.

Well done!

You successfully read this important alert message.

Heads up!

This alert needs your attention, but it's not super important.

Heads up!

This alert needs your attention, but it's not super important.

Warning!

This is a block style alert.

Thumbnails

Generic placeholder thumbnail
Generic placeholder thumbnail
Generic placeholder thumbnail
Generic placeholder thumbnail

With captions

Generic placeholder thumbnail

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

Generic placeholder thumbnail

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

Generic placeholder thumbnail

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

Media object

Generic placeholder image

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.

  • Generic placeholder image

    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.

    Generic placeholder image
    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.

    Generic placeholder image
    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.

  • Generic placeholder image

    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.

Wells

Small wells

Ut aliquet, lorem eu porta imperdiet, velit justo adipiscing dui, vitae sollicitudin arcu tellus eu est. Duis sem enim, venenatis non luctus eu, malesuada non nunc. Vestibulum venenatis eget purus scelerisque ultricies. Donec viverra metus vitae ultrices commodo.

Medium wells (default)

Ut aliquet, lorem eu porta imperdiet, velit justo adipiscing dui, vitae sollicitudin arcu tellus eu est. Duis sem enim, venenatis non luctus eu, malesuada non nunc. Vestibulum venenatis eget purus scelerisque ultricies. Donec viverra metus vitae ultrices commodo.

Large wells

Ut aliquet, lorem eu porta imperdiet, velit justo adipiscing dui, vitae sollicitudin arcu tellus eu est. Duis sem enim, venenatis non luctus eu, malesuada non nunc. Vestibulum venenatis eget purus scelerisque ultricies. Donec viverra metus vitae ultrices commodo.

List group

Panels

Default panel

This is a default panel

This is a footer

Success panel

This is a success panel
This is a footer

Danger panel

This is a danger panel
This is a footer

Warning panel

This is a panel
This is a footer

Info panel

This is a panel
This is a footer

Panel with a nested list group

This is a panel
  • First Item
  • Second Item
  • Third Item
This is a footer

Opacity

Default opacity Demo of opct-20 Demo of opct-70

Demo of opct-20

Demo of opct-70

Absolute positioning

I love camping!

I love camping!

Visible / Invisible

Content can be made appear or hide using CSS.

Icons

Grid layout

There are hundreds of possible layout options. Here are some samples:

Full Width

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Half width

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Half width

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.

Three quarters width

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

One quarter width

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.

One third width

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo. Duis aute irure dolor in reprehenderit in voluptate.

Two thirds width

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate.

Date modified: