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

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

Contextual Colors

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

Contextual Backgrounds

.bg-primary

.bg-success

.bg-info

.bg-warning

.bg-danger

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

Learn more

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

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

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

@fat

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

@mdo

Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tattooed cosby sweater food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetic exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.

one

Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in, sustainable delectus consectetur fanny pack iphone.

two

In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.

three

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

Keytar twee blog, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats you probably haven't heard of them consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat before they sold out, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.