Aenean auctor wisi et urna. Aliquam erat volutpat. Duis ac turpis. Integer rutrum ante eu lacus. Vestibulum libero nisl, porta vel, scelerisque eget, malesuada at neque.
Aenean auctor wisi et urna. Aliquam erat volutpat. Duis ac turpis. Integer rutrum ante eu lacus. Vestibulum libero nisl, porta vel, scelerisque eget, malesuada at neque.
Aenean auctor wisi et urna. Aliquam erat volutpat. Duis ac turpis. Integer rutrum ante eu lacus. Vestibulum libero nisl, porta vel, scelerisque eget, malesuada at neque.
| Header 1 | Header 2 | Header 3 | Header 4 | Header 5 |
| 1 | Donec sit amet eros | 20 | $13 | $3861 |
| 2 | Lorem ipsum dolor sit amet | 29 | $93 | $922 |
| 3 | Consectetuer adipiscing elit | 330 | $40 | $8000 |
| 4 | Mauris fermentum dictum magna | 17 | $22 | $122 |
| 5 | Sed laoreet aliquam leo | 98 | $4 | $650 |
| FREE$0 monthly | BASIC$9.99 monthly | ADVANCED$29.99 monthly | PROFESSIONAL$49.99 monthly | ULTIMATE$99.99 monthly | |
| User Limit | 50 | 100 | 150 | 200 | 300 |
| Team Members | unlimited | unlimited | unlimited | unlimited | unlimited |
| Disk Limit | unlimited | unlimited | unlimited | unlimited | unlimited |
| Custom Domain |  |
|
|
|
|
| PayPal Integration | |
|
|
|
|
| Basecamp Integration |  |
|
|
|
|
| Email Tech Support | |
|
|
|
|
| Unlimited Projects | |
|
|
|
|
| Real-time Stats | |
|
|
|
|
| SSL Secuirity | |
|
|
|
|
| Sign Up | Sign Up | Sign Up | Sign Up | Sign Up |
- FREE$0 monthly
- Up to 50 users
- Limited team members
- Limited disk space
- Custom Domain
- PayPal Integration
- Basecamp Integration
- Email Tech Support
- Unlimited Projects
- Real-time Stats
- SSL Secuirity
- Sign Up
- BASIC$9.99 monthly
- Up to 50 users
- Limited team members
- Limited disk space
- Custom Domain
- PayPal Integration
- Basecamp Integration
- Email Tech Support
- Unlimited Projects
- Real-time Stats
- SSL Secuirity
- Sign Up
- ADVANCED$29.99 monthly
- Up to 50 users
- Limited team members
- Limited disk space
- Custom Domain
- PayPal Integration
- Basecamp Integration
- Email Tech Support
- Unlimited Projects
- Real-time Stats
- SSL Secuirity
- Sign Up
- PROFESSIONAL$49.99 monthly
- Up to 50 users
- Limited team members
- Limited disk space
- Custom Domain
- PayPal Integration
- Basecamp Integration
- Email Tech Support
- Unlimited Projects
- Real-time Stats
- SSL Secuirity
- Sign Up
Responsive Grid
Using the grid is easy, simply create a .row element and a number of child elements with a class of .col-{columns span}.
Each .col-*-* spans a certain portion of the row.
The code shown will create a row of 4 equally sized columns, which matches the 4th row in the grid shown above.
<div class="col-1-4">Content</div>
<div class="col-1-4">Content</div>
<div class="col-1-4">Content</div>
<div class="col-1-4">Content</div>
</div>
Nested Columns
To nest your content, add a new .row and set of .col-*-* children within an existing .col-*-* element. Nested rows should include a set of columns that also add up to a whole 1.
Nested columns are also responsive and there is no limit on how deep can nesting go. Note that the width of each column will be set based on the width of its parent .row and NOT the total page width. This opens a door for creating more complicated layouts and allows creating more than 6 columns per row.
The code shown will create a layout matching the 1st row in the grid shown above.
<div class="row">
<div class="col-1-2">
<div class="row">
<div class="col-1-2">Content</div>
<div class="col-1-2">Content</div>
</div>
</div>
<div class="col-1-2">
<div class="row">
<div class="col-1-3">Content</div>
<div class="col-1-3">Content</div>
<div class="col-1-3">Content</div>
</div>
</div>
</div>
Offset Columns
Sometimes, for any reason, you might want to move a column to the right or to the left. Offsets allow you to create additional space between columns in a row. You can offset a column simply by adding a class of push-{columns span} (move to the right) or pull-{columns span} (move to the left).
The code shown will create a layout matching the 2nd row in the grid shown above.
<div class="row">
<div class="col-1-4 push-3-4">Pushed 1/4</div>
<div class="col-3-4 pull-1-4">Pulled 3/4</div>
</div>
Centered Columns
You can center a column just by adding a class centered to the column block.
Centered columns are placed in the middle of the row. This does not center their content, but centers the grid element itself. This is a convenient way to make sure a block is centered, even if you change the number of columns it contains. Note: There cannot be any other column blocks in the row for this to work.
The code shown will create a layout matching the 2nd row in the grid shown above.
<div class="row">
<div class="col-3-4 centered">
<div class="row">
<div class="col-1-2"><span>Nested 1/2 Column</span></div>
<div class="col-1-2"><span>Nested 1/2 Column</span></div>
</div>
</div>
</div>
h1. Heading 1
h2. Heading 2
h3. Heading 3
h4. Heading 4
h5. Heading 5
h6. Heading 6
Bootstrap's global default font-size is 15px, with a line-height of 22px. This is applied to the <body> and all paragraphs. In addition, <p> (paragraphs) receive a bottom margin of half their line-height (11px by default).
Example:
Ut tellus dolor, dapibus eget, elementum vel, cursus eleifend, elit. Aenean auctor wisi et urna. Aliquam erat volutpat. Duis ac turpis. Donec sit amet eros. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus eget nibh. Etiam cursus leo vel metus. Nulla facilisi. Aenean nec eros. Nam elit agna,endrerit sit amet, tincidunt ac, viverra sed, nulla. Donec porta diam eu massa. Quisque diam lorem, interdum vitae,dapibus ac, scelerisque vitae, pede.
Mauris fermentum dictum magna. Sed laoreet aliquam leo. Ut tellus dolor, dapibus eget, elementum vel, cursus eleifend, elit. Aenean auctor wisi et urna. Aliquam erat volutpat. Duis ac turpis. Integer rutrum ante eu lacus. Vestibulum libero nisl, porta vel, scelerisque eget, malesuada at, neque. Ut tellus dolor, dapibus eget, elementum vel, cursus eleifend, elit. Aenean auctor wisi et urna. Aliquam erat volutpat. Duis ac turpis. Donec sit amet eros. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris fermentum dictum magna. Sed laoreet aliquam leo.
Lead Body Copy
Make a paragraph stand out by adding .lead.
Example:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus eget nibh. Etiam cursus leo vel metus. Nulla facilisi. Aenean nec eros. Nam elit agna,endrerit sit amet, tincidunt ac, viverra sed, nulla. Donec porta diam eu massa.
Bold
For emphasizing a snippet of text with a heavier font-weight.
Example:
The following snippet of text is rendered as bold text.
Italics
For emphasizing a snippet of text with italics.
Example:
The following snippet of text is rendered as italicized text.
Heads up! Feel free to use <b> and <i> in HTML5. <b> is meant to highlight words or phrases without conveying additional importance while <i> is mostly for voice, technical terms, etc.
Lists
Unordered
A list of items in which the order does not explicitly matter.
Example:
- 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
- <ul>
- <li>...</li>
- </ul>
Ordered
A list of items in which the order does explicitly matter.
Example:
- 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
- <ol>
- <li>...</li>
- </ol>
Blockquotes
For quoting blocks of content from another source within your document.
Default blockquote
Wrap <blockquote> around any HTML as the quote. For straight quotes we recommend a <p>.
Example:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
- <blockquote>
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
- </blockquote>
Blockquote options
Style and content changes for simple variations on a standard blockquote.
Naming a source
Add <small> tag for identifying the source. Wrap the name of the source work in <cite>.
Example:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Someone famous in Source Title
- <blockquote>
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
- <small>Someone famous <cite title="Source Title">Source Title</cite></small>
- </blockquote>
Alternate displays
Use .pull-right for a floated, right-aligned blockquote.
Example:
- <blockquote class="pull-right">
- ...
- </blockquote>
Emphasis classes
Convey meaning through color with a handful of emphasis utility classes.
Example:
Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
Etiam porta sem malesuada magna mollis euismod.
Donec ullamcorper nulla non metus auctor fringilla.
Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
- <p class="muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
- <p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
- <p class="text-error">Donec ullamcorper nulla non metus auctor fringilla.</p>
- <p class="text-info">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.</p>
- <p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>