.jpg)
Typography
Headings
All HTML headings, <h1> through <h6> are available.
h1. Heading 1
h2. Heading 2
h3. Heading 3
h4. Heading 4
h5. Heading 5
h6. Heading 6
Text Emphasis
<em>
The following snippet of text is rendered as italicized text.
<em>italicized text</em>
Bold Text
<strong>
The following snippet of text is rendered as bold text.
<strong>bold text</strong>
Body copy
Our global default font-size is 16px, with a line-height of x. This is applied to the <body> and all paragraphs. In addition, <p> (paragraphs) receive a bottom margin of half their line-height (9px by default).
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.
<p>...</p>
Lead body copy
Make a paragraph stand out by adding .lead.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
<p class="lead">...</p>
Small body copy
<p class="small">
This snippet of text is rendered as small text.
<p class="small">small text</p>
Lists
- Lorem ipsum dolor sit amet
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
- Faucibus porta lacus fringilla vel
- Eget porttitor lorem
<ul>
<li></li>
</ul> - 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
<ol>
<li></li>
</ol> - Lorem ipsum dolor sit amet
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
- Faucibus porta lacus fringilla vel
- Eget porttitor lorem
<ul class="unstyled">
<li></li>
</ul> Tables
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @jaket |
| 3 | Larry | the Bird |
<table class="table">
<tr>
<td>Larry</td>
<td>the Bird</td>
</tr>
<tr>
<td>Jacob</td>
<td>Thornton</td>
</tr>
</table>| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @jaket |
| 3 | Larry | the Bird |
<table class="table table-striped">
<tr>
<td>Larry</td>
<td>the Bird</td>
</tr>
<tr>
<td>Jacob</td>
<td>Thornton</td>
</tr>
</table> | # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @jaket |
| 3 | Larry | the Bird |
<table class="table table-bordered">
<tr>
<td>Larry</td>
<td>the Bird</td>
</tr>
<tr>
<td>Jacob</td>
<td>Thornton</td>
</tr>
</table>| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @jaket |
| 3 | Larry | the Bird |
<table class="table table-hover">
<tr>
<td>Larry</td>
<td>the Bird</td>
</tr>
<tr>
<td>Jacob</td>
<td>Thornton</td>
</tr>
</table> Buttons
| Button | Class | Description |
|---|---|---|
btn |
Standard button | |
btn btn-orange |
Standard orange button | |
btn btn-gray |
Standard gray button | |
btn btn-blue |
Standard blue button | |
btn btn-clear |
Standard clear button for use on colored or image backgrounds | |
btn btn-block |
Create a button that spans the full width of a parent | |
btn btn-info |
Used as an alternative to the default styles | |
btn btn-success |
Indicates a successful or positive action | |
btn btn-warning |
Indicates caution should be taken with this action | |
btn btn-danger |
Indicates a dangerous or potentially negative action | |
btn btn-inverse |
Alternate dark gray button, not tied to a semantic action or use |
Icons
This is a list of al lthe icons avaiable to use
| Icon | Class |
|---|---|
class="icon-linkedin" |
|
class="icon-facebook" |
|
class="icon-facebook-f" |
|
class="icon-youtube" |
|
class="icon-flickr" |
|
class="icon-twitter" |
|
class="icon-email" |
|
class="icon-plus-square" |
|
class="icon-send" |
|
class="icon-home" |
|
class="icon-play" |
|
class="icon-spinner" |
|
class="icon-notification" |
|
class="icon-menu" |
|
class="icon-close" |
|
class="icon-person" |
|
class="icon-search" |
|
class="icon-chevron-left" |
|
class="icon-chevron-right" |
|
class="icon-chevron-thin-up" |
|
class="icon-chevron-thin-down" |
|
class="icon-chevron-thin-left" |
|
class="icon-chevron-thin-right" |
