Style Guide
Typography
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 toPre
/* I also like multi-line code */
body {
font-size: 16px;
color: #333;
...
}
Tables
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 |
Forms
Inline Form
Horizontal Form
Input Groups
@
.00
$
.00
Buttons
Button Groups
Dropdowns
Tabs & Pills
Basic Tabs
Justified Tabs
Basic Pills
Justified Pills
Navbar
Basic Navbar
Navbar Form
Navbar Buttons
Navbar Text
Navbar Form
Breadcrumbs
Pagination
Pager
Aligned Links
Labels & Badges
Labels
- Default
- Primary
- Success
- Warning
- Danger
- Info
Badges
- 1
- 2
- 3
- 4
- 5
- 6
Jumbotron
Hello, world!
This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.
Page Header
Example page header subtext for header
Alerts
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
Progress Bars
Default Bars
Striped Bars
Thumbnails
Default
Custom Content
Media Object
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.List Groups
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
Linked List Group
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 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
Wells
Default
Use the well...
Large
Use the well...
Small
Use the well...