Demo
Responsive Design
Devices
Resize your browser or load on different devices to test the above classes.
Green checkmarks indicate that class is visible in your current viewport.
- Phone✔ Phone
- Tablet✔ Tablet
- Desktop✔ Desktop
Hidden on…
Here, green checkmarks indicate that class is hidden in your current viewport.
Grid System
12 columns with a responsive design
Offsetting columns
Typography
Example body text
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 ut id elit.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui.
h1. Heading 1
h2. Heading 2
h3. Heading 3
h4. Heading 4
h5. Heading 5
h6. Heading 6
This is a paragraph.
strong – For emphasizing a snippet of text with important
<em> – For emphasizing a snippet of text with stress
<abbr> – Wraps abbreviations and acronyms to show the expanded version on hover
<code> – This is pre-formatted text for code view.
Example blockquotes
Default blockquotes are styled as such:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.
Someone famous in Body of work
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.
Someone famous in Body of work
Lists
Unordered
<ul>
- 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
Unstyled
<ul class="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
Ordered
<ol>
- 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
Description
<dl>
- 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
<dl class="dl-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.
Tables
Striped Table
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Ian | Gray | @iagdotme |
| 2 | Tom | Gray | |
| 3 | Larry | the Bird |
Striped Table
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Ian | Gray | @iagdotme |
| 2 | Tom | Gray | |
| 3 | Larry | the Bird |
Bordered table
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Ian | Gray | @iagdotme |
| 2 | Tom | Gray | |
| 3 | Larry | the Bird |
Condensed table
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Ian | Gray | @iagdotme |
| 2 | Tom | Gray | |
| 3 | Larry | the Bird |
All the above
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Ian | Gray | @iagdotme |
| 2 | Tom | Gray | |
| 3 | Larry | the Bird |
Forms
Standard Forms
Form States
Extending Forms
Buttons
| Button | class=”” | Description |
|---|---|---|
btn |
Standard gray button with gradient | |
btn btn-primary |
Provides extra visual weight and identifies the primary action in a set of buttons | |
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
Powered by Font Awesome
Base Icons
Extended Icons
Icon Examples
New Icons in 3.0
You asked, Font Awesome delivers with 40 shiny new icons in version 3.0. New icons can be requested on the
Font Awesome GitHub project. Or even
better, you can contribute your own icons.