Buttons
Headings
Heading 1 Secondary
Heading 2 Secondary
Heading 3 Secondary
Heading 4 Secondary
Heading 5 Secondary
Heading 6 Secondary
Example Address
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890 Full Name
first.last@example.com
Alignment Classes
Left aligned text.
Center aligned text.
Right aligned text.
Block Level Descriptions
A list of terms with their associated descriptions.
- Description lists
- A description list is perfect for defining terms.
- Euismod
- Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
- Malesuada porta
- Etiam porta sem malesuada magna mollis euismod.
Ordered List
A list of items in which the order does explicitly matter (numbered list).
- Lorem ipsum dolor sit amet.
- Officiis modi ipsum officia ad!
- Atque nisi fugit repellat ratione.
- Eveniet tenetur reiciendis eaque.
- Aperiam accusamus quas nisi?
- Assumenda, ipsa hic vel sed?
- Quaerat praesentium error.
- Magni, excepturi nulla adipisci.
- Nesciunt, reprehenderit provident cupiditate atque!
- Sit, nobis similique beatae aut.
- Eum, debitis veniam laudantium dolor.
Unstyled List
A list of items with no list-style or additional left padding.
- Lorem ipsum dolor sit amet.
- Officiis modi ipsum officia ad!
- Atque nisi fugit repellat ratione.
- Eveniet tenetur reiciendis eaque.
- Aperiam accusamus quas nisi?
- Assumenda, ipsa hic vel sed?
- Quaerat praesentium error.
- Magni, excepturi nulla adipisci.
- Nesciunt, reprehenderit provident cupiditate atque!
- Sit, nobis similique beatae aut.
- Eum, debitis veniam laudantium dolor.
Body Text
p.lead
Onwards to victory!
p
Ten years ago a crack commando unit was sent to prison by a military court for a crime they didn't commit.
small
These men promptly escaped from a maximum security stockade to the Los Angeles underground.
em
Today, still wanted by the government, they survive as soldiers of fortune.
strong
If you have a problem and no one else can help, and if you can find them, maybe you can hire the A-team.
Blockquotes
There is only one thing in the world worse than being talked about, and that is not being talked about
Oscar Wilde in The Picture of Dorian Grey
How glorious it is – and also how painful – to be an exception.
Alfred de Musset
Emphasis classes
.text-muted
Aren’t you a little short for a stormtrooper?
.text-default
That’s no moon, it’s a space station!
.text-success
The Force is strong with this one.
.text-info
I find your lack of faith disturbing.
.text-warning
These aren’t the droids you’re looking for.
.text-danger
May the Force be with you.
Horizontal description
Make terms and descriptions in <dl> line up side-by-side.
- Description lists
- A description list is perfect for defining terms.
- Euismod
- Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
- Malesuada porta
- Etiam porta sem malesuada magna mollis euismod.
Unordered List
A list of items in which the order does not explicitly matter.
- Lorem ipsum dolor sit amet.
- Officiis modi ipsum officia ad!
- Atque nisi fugit repellat ratione.
- Eveniet tenetur reiciendis eaque.
- Aperiam accusamus quas nisi?
- Assumenda, ipsa hic vel sed?
- Quaerat praesentium error.
- Magni, excepturi nulla adipisci.
- Nesciunt, reprehenderit provident cupiditate atque!
- Sit, nobis similique beatae aut.
- Eum, debitis veniam laudantium dolor.
Custom Icon List
A list of items with no list-style or additional left padding.
- List icons (like these)
- can be used
- to replace
- default bullets in lists
- and can also
- form sublist
- each with different
- icons
- thanks to baked in support for FontAwesome!
Codes
Inline
Wrap inline snippets of code with <code>.
For example, <section> should be wrapped as inline.
Block
Use <pre> for multiple lines of code.
<p>Sample text here...</p>
Prettify
To add colored syntax highlight to the <pre> tag, then use the prettyprint class, and for line numbers add the linenums class.
<div class="form-group">
<label for="focusedinput" class="col-xs-3 control-label">Focused Input</label>
<div class="col-xs-6">
<input type="text" class="form-control" id="focusedinput" placeholder="Default Input">
</div>
</div>