Typography

Vivamus accumsan ipsum vel sodales. Lorem ipsum dolor sit amet, consectetur elit.

Typographic scale

The typographic grid is based on a 12px base font-size used throughout and a 20px base line-height.

Example body text & links

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.

Example headings

h1. Heading 1

h2. Heading 2

h3. Heading 3

h4. Heading 4

h5. Heading 5
h6. Heading 6

Blockquotes

To include a blockquote, wrap <blockquote> around any HTML as the quote. For straight quotes we recommend a <p>.

<blockquote>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
	Integer posuere erat a ante.</p>
</blockquote>

Result

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Include an optional <span> element to cite your source and you'll get an em dash &mdash; before it for styling purposes.

<blockquote>
<p>&#8220;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.&#8221;
<span>Someone famous <cite title="Source Title">Source Title</cite></span></p>
</blockquote>

Result

“Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.” Someone famous Source Title

Lists

Unordered List

<ul>

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet

Ordered List

<ol>

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet

Unstyled Lists

<ul class="unstyled">

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet

Circled Lists

<ul class="circle">

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet

Square Lists

<ul class="square">

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet

Checklist Lists

<ul class="checklist">

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet

Code

Inline

Wrap inline snippets of code with <code>.

For example, <code>section</code> should be wrapped as inline.

Basic block

Use <pre> for multiple lines of code. Be sure to escape any angle brackets in the code for proper rendering.

<p>Sample text here...</p>
<pre>
&lt;p&gt;Sample text here...&lt;/p&gt;
</pre>

Note: Be sure to keep code within <pre> tags as close to the left as possible; it will render all tabs.

Tables

Table Markup

Tag Description
<table> Wrapping element for displaying data in a tabular format
<thead> Container element for table header rows (<tr>) to label table columns
<tbody> Container element for table rows (<tr>) in the body of the table
<tr> Container element for a set of table cells (<td> or <th>) that appears on a single row
<td> Default table cell
<th> Special table cell for column (or row, depending on scope and placement) labels
Must be used within a <thead>
<caption> Description or summary of what the table holds, especially useful for screen readers 
<table>
  <thead>
	<tr>
	  <th>…</th>
	  <th>…</th>
	</tr>
  </thead>
  <tbody>
	<tr>
	  <td>…</td>
	  <td>…</td>
	</tr>
  </tbody>
</table>

Table Options

Name Class Description
Default None Default styling
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

Table Examples

1. Default table styles

Tables are automatically styled with only a few borders to ensure readability and maintain structure.

Th Header 1 Th Header 2 Th Header 3 Th Header 4
Td Content 1 Td Content 2 Td Content 3 Td Content 4
Td Content 1 Td Content 2 Td Content 3 Td Content 4
Td Content 1 Td Content 2 Td Content 3 Td Content 4

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

Th Header 1 Th Header 2 Th Header 3 Th Header 4
Td Content 1 Td Content 2 Td Content 3 Td Content 4
Td Content 1 Td Content 2 Td Content 3 Td Content 4
Td Content 1 Td Content 2 Td Content 3 Td Content 4

3. Bordered table

Add borders around the entire table for aesthetic purposes with the .table-bordered class.

Th Header 1 Th Header 2 Th Header 3 Th Header 4
Td Content 1 Td Content 2 Td Content 3 Td Content 4
Td Content 1 Td Content 2 Td Content 3 Td Content 4
Td Content 1 Td Content 2 Td Content 3 Td Content 4

4. Condensed table

Make your tables more compact by adding the .table-condensed class to cut table cell padding in half.

Th Header 1 Th Header 2 Th Header 3 Th Header 4
Td Content 1 Td Content 2 Td Content 3 Td Content 4
Td Content 1 Td Content 2 Td Content 3 Td Content 4
Td Content 1 Td Content 2 Td Content 3 Td Content 4

Alert Boxes

The default class for alerts is .alert

Easily extend the standard alert message with the .alert-block class for more padding.

Add optional classes to change an alert's connotation:

  • .alert-success - Success
  • .alert-error - Error or danger
  • .alert-info - Information

Vestibulum et felis eu dui imperdiet accumsan eu in quam. In hac habitasse platea dictumst.

<div class="alert">
	<p>Message</p>
</div>

Vestibulum et felis eu dui imperdiet accumsan eu in quam. In hac habitasse platea dictumst.

Vestibulum et felis eu dui imperdiet accumsan eu in quam. In hac habitasse platea dictumst.

<div class="alert alert-block">
	<p>Message</p>						
	<p>Message</p>					
</div>

Vestibulum et felis eu dui imperdiet accumsan eu in quam. In hac habitasse platea dictumst.

<div class="alert alert-error">
	<p>Message</p>
</div>

Vestibulum et felis eu dui imperdiet accumsan eu in quam. In hac habitasse platea dictumst.

<div class="alert alert-success">
	<p>Message</p>						
</div>

Vestibulum et felis eu dui imperdiet accumsan eu in quam. In hac habitasse platea dictumst.

<div class="alert alert-info">
	<p>Message</p>					
</div>

Buttons

Usage

As a convention, buttons should only be used for actions while hyperlinks are to be used for objects. For instance, "Download" should be a button while "recent activity" should be a link.

Button styles can be applied to anything with the .btn class applied. However, typically you'll want to apply these to an <a>, <button>, or <input> element.

Link 
<a class="btn" href="#">Link</a>
<button class="btn" type="submit"> Button </button>
<input  class="btn" type="button" value="Input">
<input  class="btn" type="submit" value="Submit">

As a best practice, try to match the element for you context to ensure matching cross-browser rendering. If you have an input, use an <input type="submit"> for your button.

Sizes

Fancy larger buttons? Add .btn-large for an additional sizes.

Large Button
A class="" Description
Default btn Standard gray button with gradient
White btn btn-white Same as default style
Black btn btn-black Used as an alternative to the default styles
Red btn btn-red Indicates caution should be taken with this action
Green btn btn-green Indicates a successful or positive action
Blue btn btn-blue Indicates caution should be taken with this action

Forms

<form id="" action="">
	<fieldset>
		<p>
			<label for="text-input">Text Input: <span class="required">*</span></label>
			<input class="text" type="text" id="text-input" name="text-input" value="" />
		</p>

		<p>
			<label for="message">Message:</label>
			<textarea id="message" name="message" rows="3" cols="25"></textarea>
		</p>
		<p>
			<label class="checkbox"> 
				<input type="checkbox" value="" /> Text for checkbox
			</label>	
		</p>
		<p>
			<label class="radio"> 
				<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1"  checked="checked" />
				Option one
			</label>
			<label class="radio"> 
				<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2" />
				Option two
			</label>
		</p>
		<p>
			<select>
			<option>Option 1</option>
			<option>Option 2</option>
			<option>Option 3</option>
			<option>Option 4</option>
			<option>Option 5</option>
			</select>
		</p>
		<p>
			<input type="submit" name="submit" value="Send!" class="btn" />
		</p>
	</fieldset>
</form>

Misc

Class Description Usage
.hr creates an divided <div class="hr"></div>
.hr-alt creates alternative divider <div class="hr-alt"></div>
.text-left text-align:left
.text-center text-align:center
.text-right text-align:right
.text-highlight Highlights a section of text suspendisse <span class="text-highlight">sed diam libero</span> vel
.text-highlight2 Highlight a section of text in an alternative color suspendisse <span class="text-highlight2">sed diam libero</span> vel
.text-uppercase text-transform:uppercase
mute changes color to a grey
.last Removes margin bottom when applied to <p>, <ul>, <ol>, <h1>.. <h6> <p class="last">
.img-align-left align image left
.img-align-right align image right
.bordered created an 1px border