Typography

This is heading 1

This is heading 2

This is heading 3

This is heading 4

This is heading 5

This is heading 6

Paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas fermentum tristique mauris et congue. Aenean tincidunt enim non risus lacinia interdum. Praesent tincidunt orci in nunc varius vel tristique nulla facilisis. Integer eu felis elit, nec gravida lectus. Vestibulum in quam ante, nec varius nulla. Nulla facilisi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla consequat pretium urna at interdum. Suspendisse quam arcu, condimentum et faucibus nec, fringilla eu est. Pellentesque nec leo ac justo blandit elementum in congue sapien. Nullam ac augue nisi. Donec vel justo sit amet ipsum porttitor vehicula. In tempor, enim sit amet porta malesuada, leo libero dapibus elit, at interdum quam felis eu felis.

Paragraph with line break

Praesent non tortor eu nibh posuere egestas vitae non tortor. Fusce aliquam nunc et ligula feugiat aliquam. Etiam risus purus, venenatis nec eleifend at, faucibus sed nunc. Integer nec mauris purus, non hendrerit velit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus rhoncus lorem ut purus placerat commodo. Cras in velit metus. Nullam tellus nisi, laoreet eu fringilla eu, gravida eget tortor. Pellentesque pellentesque, dolor porttitor varius elementum, urna justo semper sapien, ut accumsan libero quam in sapien. Sed metus mauris, iaculis id consequat aliquam, ornare sit amet eros. Curabitur tempus pretium elit. Ut id velit sed elit sagittis luctus id eget ante. Quisque enim diam, sodales ac convallis id, rhoncus nec elit.
Fusce elit mauris, auctor nec fringilla at, malesuada eget libero. Vivamus at leo est. Sed ullamcorper iaculis mattis. Suspendisse scelerisque hendrerit porttitor. In vel nisl mauris, vitae accumsan massa. Morbi sodales iaculis sollicitudin. Phasellus malesuada semper mollis. Maecenas vitae ante quis orci pharetra adipiscing. Donec metus purus, tempor et placerat eu, venenatis quis libero. Nulla dictum condimentum porta.

Text with no tags

Nunc iaculis mi massa, et consequat nunc. In id purus augue, vel auctor felis. Etiam accumsan congue massa, condimentum semper diam euismod sed. Nam dignissim orci id mauris mattis tristique. Mauris ligula sapien, posuere nec suscipit auctor, vehicula adipiscing risus. Aenean sit amet arcu diam. Ut vitae odio a felis rutrum consequat. Ut adipiscing velit at turpis egestas interdum. Cras sit amet ante enim.

Links

This is a standard link to a webpage.
This is text in bold.
This is text in italics.

Lists

Unordered List

<ul>

This is a list item
This is alist item
This is a list item
This is a list item
- This is a nested list item
- This is a nested list item
- This is a nested list item
This is a list item

Unstyled List

<ul class="unstyled">

This is a list item
This is a list item
This is a list item
This is a list item
- This is a nested list item
- This is a nested list item
- This is a nested list item
This is a list item

Ordered List

<ol>

This is a list item
This is a list item
This is a list item
This is a list item
- This is a nested list item
- This is a nested list item
- This is a nested list item
This is a list item

Tables

Name	Class	Description
Default	None	No styles, just columns and rows
Basic	`.table`	Only horizontal lines between rows
Bordered	`.table-bordered`	Rounds corners and adds outer border
Zebra-stripe	`.table-striped`	Adds light gray background color to odd rows (1, 3, 5, etc)
Condensed	`.table-condensed`	Cuts vertical padding in half, from 8px to 4px, within all `td` and `th` elements

Example tables

1. Default table styles

Tables are automatically styled with only a few borders to ensure readability and maintain structure. With 2.0, the .table class is required.

	<table>
	</table>

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

2. Basic table styles

Tables are automatically styled with only a few borders to ensure readability and maintain structure. With 2.0, the .table class is required.

	<table class="table">
	</table>

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

3. Striped table

Get a little fancy with your tables by adding zebra-striping—just add the .table-striped class.

Note: Striped tables use the :nth-child CSS selector and is not available in IE7-IE8.

	<table class="table table-striped">
	</table>

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

4. Bordered table

Add borders around the entire table and rounded corners for aesthetic purposes.

	<table class="table table-bordered">
	</table>

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

5. Condensed table

Make your tables more compact by adding the .table-condensed class to cut table cell padding in half (from 8px to 4px)..

	<table class="table table-condensed">
	</table>

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

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-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

When to add a button

Buttons should only ever be added to one of three elements - <a>, <input>, <button>

	<a href="#" class="btn btn-primary"></a>
	<button class="btn btn-primary"></button>
	<input type="submit" class="btn btn-primary">

Styleguide

Typography

This is heading 1

This is heading 2

This is heading 3

This is heading 4

This is heading 5

This is heading 6

Paragraph

Paragraph with line break

Text with no tags

Links

Lists

Unordered List

Unstyled List

Ordered List

Tables

Example tables

1. Default table styles

2. Basic table styles

3. Striped table

4. Bordered table

5. Condensed table

Buttons

When to add a button

Quick Links

Quick Links

Quick Links