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

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.

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>
  1. This is a list item
  2. This is a list item
  3. This is a list item
  4. This is a list item
    • This is a nested list item
    • This is a nested list item
    • This is a nested list item
  5. 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.

  1. <table>
  2. </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.

  1. <table class="table">
  2. </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.

  1. <table class="table table-striped">
  2. </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.

  1. <table class="table table-bordered">
  2. </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)..

  1. <table class="table table-condensed">
  2. </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>

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