Typography
Grumpy wizards make toxic brew for the evil Queen and Jack.
Grumpy wizards make toxic brew for the evil Queen and Jack. One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked. One morning, when Gregor Samsarr worke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked.
Base Styles
address
Example
Twitter, Inc.795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890 Full Name
first.last@example.com
badges
Example
blockquote
Example
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Blockquote with attribution
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Right aligned
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
buttons
Example
code
Example
<p>A block of code is wrapped in pre tags</p>
For example, <section> should be
wrapped as inline.
To switch directories, type cd followed by the name of the directory.
definition lists
Example
- Description lists
- A description list is perfect for defining terms.
- Euismod
- Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
- Donec id elit non mi porta gravida at eget metus.
- Malesuada porta
- Etiam porta sem malesuada magna mollis euismod.
Horizontal
- Description lists
- A description list is perfect for defining terms.
- Euismod
- Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
- Donec id elit non mi porta gravida at eget metus.
- Malesuada porta
- Etiam porta sem malesuada magna mollis euismod.
- Felis euismod semper eget lacinia
- Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
form controls
Example
Inline checkboxes
headings
Example
Page Header With Small Text
h1. Bootstrap heading Secondary text
h2. Bootstrap heading Secondary text
h3. Bootstrap heading Secondary text
h4. Bootstrap heading Secondary text
h5. Bootstrap heading Secondary text
h6. Bootstrap heading Secondary text
images
Example
labels
Example
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Default Primary Success Info Warning Dangerlists
Example
Unordered
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
Ordered
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
Unstyled
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
Inline
- Lorem ipsum
- Phasellus iaculis
- Nulla volutpat
progress bars
Example
Basic
Contextual Alternatives
Striped
Animated
Stacked
tables
Example
| # | First Name | Tables |
|---|---|---|
| 1 | Michael | Are formatted like this |
| 2 | Lucille | Do you like them? |
| 3 | Success | |
| 4 | Danger | |
| 5 | Warning | |
| 6 | Active |
Striped & condensed table with alternating backgrounds
| # | First Name | Tables |
|---|---|---|
| 1 | Michael | This one is bordered and condensed |
| 2 | Lucille | Do you still like it? |
text elements
Example
Example body text
Lead paragraph: vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
This line of text is meant to be treated as fine print.
The following snippet of text is rendered as bold text.
The following snippet of text is rendered as italicized text.
An abbreviation of the word attribute is attr.
Left aligned text.
Center aligned text.
Right aligned text.
Justified text.
Muted: Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
Primary: Nullam id dolor id nibh ultricies vehicula ut id elit.
Warning: Etiam porta sem malesuada magna mollis euismod.
Danger: Donec ullamcorper nulla non metus auctor fringilla.
Success: Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
Info: Maecenas sed diam eget risus varius blandit sit amet non magna.
well
Example
Patterns - Design and mark-up patterns unique to your site.
alerts
Example
breadcrumbs
Example
buttons advanced
Example
Button Groups
With Dropdown
Vertical
Justified
Dropdowns
dropdowns
Example
forms
Example
hero
Example
Hello, world!
This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.
list groups
Example
- 14 Cras justo odio
- 2 Dapibus ac facilisis in
- 1 Morbi leo risus
With links
Contextual classes
- Dapibus ac facilisis in
- Cras sit amet nibh libero
- Porta ac consectetur ac
- Vestibulum at eros
media object
Example
Default
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.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. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.Media List
-
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.
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.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.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. -
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.
navbar
Example
navs
Example
Tabs
Justified Tabs
Pills
Stacked Pills
Tabs with dropdowns
page header
Example
Example page header Subtext for header
panels
Example
Panel title
Contextual classes
Panel title
Panel title
Panel title
Panel title
Panel title
thumbnails
Example
