Typography
h1. Heading 1
h2. Heading 2
h3. Heading 3
h4. Heading 4
h5. Heading 5
h6. Heading 6
Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
h1. Heading 1
Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
h2. Heading 2
Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
h3. Heading 3
Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
h4. Heading 4
Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
h5. Heading 5
Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
h6. Heading 6
Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Responsive images
Tables
Bordered without thead
| 1 | 2 | 3 |
| 1 | 2 | 3 |
| 1 | 2 | 3 |
Bordered without thead, with caption
| 1 | 2 | 3 |
| 1 | 2 | 3 |
| 1 | 2 | 3 |
Bordered without thead, with colgroup
| 1 | 2 | 3 |
| 1 | 2 | 3 |
| 1 | 2 | 3 |
| 3 | 6 | 9 |
Bordered with thead, with colgroup
| A | B | C |
|---|---|---|
| 1 | 2 | 3 |
| 1 | 2 | 3 |
| 1 | 2 | 3 |
| 3 | 6 | 9 |
Bordered with thead and caption
| 1 | 2 | 3 |
|---|---|---|
| 1 | 2 | 3 |
| 1 | 2 | 3 |
| 1 | 2 | 3 |
| 3 | 6 | 9 |
Bordered with rowspan and colspan
| 1 | 2 | 3 |
|---|---|---|
| 1 and 2 | 3 | |
| 1 | 2 | 3 |
| 1 | 3 | |
| 2 and 3 | ||
Grid sizing
| 1 | 2 | 3 |
|---|---|---|
| 1 and 2 | 3 | |
| 1 | 2 | 3 |
| 1 | 3 | |
| 2 and 3 | ||
Nesting and striping
| Test | ||||||||
|---|---|---|---|---|---|---|---|---|
|
Forms
Buttons and button groups
Horizontal form errors
Prepend and append on inputs
Prepend and append with uneditable
Prepend with type="submit"
Fixed row with inputs
Inputs should not extend past the light red background, set on their parent, a .span* column.
Selects
Dropdowns
Dropdown link with hash URL
Dropdown link with custom URL and data-target
Dropdown on a button
Thumbnails
Default thumbnails (no grid sizing)
Standard grid sizing
Tabs
I'm in Section 1.
I'm in Section 1.1.
I'm in Section 1.2.
I'm in Section 1.3.
Howdy, I'm in Section 2.
What up girl, this is Section 3.
Labels
Inline label
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Maecenas sed diam Label name eget risus varius blandit sit amet non magna. Fusce .class-name dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
Buttons
| Maecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue. Donec ullamcorper nulla non metus auctor fringilla. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. |
|
Mini buttons: text and icon
Responsive utility classes
Visible on...
- Phone✔ Phone
- Tablet✔ Tablet
- Desktop✔ Desktop
- Phone + Tablet✔ Phone + Tablet
- Tablet + Desktop✔ Tablet + Desktop
- All✔ All
Hidden on...
Gradients
Horizontal
Vertical
Directional
Three colors
Radial
Striped
Horizontal three colors
Alerts
Alert default
Alert! Best check yourself, you're not looking too good.
Success
Success! Best check yourself, you're not looking too good.
Info
Info! Best check yourself, you're not looking too good.
Warning
Warning! Best check yourself, you're not looking too good.
Error
Error! Best check yourself, you're not looking too good.