Headers

Example EMS PX

Header 1

2em 32px

Header 2

1.75em 28px

Header 3

1.5em 24px

Header 4

1.313em 21px
Header 5
1.125em 18px
Header 6
1em 16px

Text Emphasis Classes

  • .text-muted
  • .text-primary
  • .text-warning
  • .text-danger
  • .text-success
  • .text-info

Blockquote

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

John Smith

Code

I like to <code>.

Pre

/* I also like multi-line code */
body {
 font-size: 16px;
 color: #333;
 ...
}

Basic Table

# First Name Last Name Username
1 John Smith jsmith
2 Jane Doe jdoe
3 Jon Doe jondoe

Table Striped

# First Name Last Name Username
1 John Smith jsmith
2 Jane Doe jdoe
3 Jon Doe jondoe

Table Hover

# First Name Last Name Username
1 John Smith jsmith
2 Jane Doe jdoe
3 Jon Doe jondoe

Table Bordered

# First Name Last Name Username
1 John Smith jsmith
2 Jane Doe jdoe
3 Jon Doe jondoe

Table Condensed

# First Name Last Name Username
1 John Smith jsmith
2 Jane Doe jdoe
3 Jon Doe jondoe

Contextual Table Classes

# First Name Last Name Username
1 John Smith jsmith
2 Jane Doe jdoe
3 Jon Doe jondoe
3 Jon Doe jondoe
Basic Form

Block level help

Inline Form


Horizontal Form


Input Groups

@
.00
$ .00
.red
.red2
.blue
.blue2
.orange
.orange2
.teal
.teal2
.yellow
.yellow2
.green
.green2
.purple
.purple2
.steel-grey
.steel-grey2
.off-white
.light-grey
.grey
.medium-grey

Justified Tabs

Justified Pills

Navbar Form

Navbar Buttons

Navbar Text

Default

Small

Large

Default

Aligned Links

Labels

  • Default
  • Primary
  • Success
  • Warning
  • Danger
  • Info

Badges

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

Hello, world!

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

Learn more

Block Alert

Warning!

Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Link

Alternate Alerts

Oh snap! Change a few things up and try submitting again. Link

Well done! You successfully read this important alert message. Link

Heads up! This alert needs your attention, but it's not super important. Link

Default Bars

Striped Bars

Default

Custom Content

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.

Action Action

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.

Action Action

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.

Action Action

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

Basic List Group

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

With Badges

  • 1 Cras justo odio
  • 3 Dapibus ac facilisis in
  • 10 Morbi leo risus
  • 6 Porta ac consectetur ac
  • 800 Vestibulum at eros

Basic Panel

Basic panel example

Panel with Header

Panel heading
Panel content

Panel title

Panel content

Panel with Footer

Panel content

Contextual Alternatives

Panel heading
Panel content
Panel heading
Panel content
Panel heading
Panel content
Panel heading
Panel content
Panel heading
Panel content

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

Default

Use the well...

Large

Use the well...

Small

Use the well...
Launch demo modal