Grid

The default Bootstrap grid system utilizes 12 columns, making for a 940px wide container without responsive features enabled.

With the responsive CSS file added, the grid adapts to be 724px. Below 767px viewports, the columns become fluid and stack vertically.

.span1
.span1
.span1
.span1
.span1
.span1
.span1
.span1
.span1
.span1
.span1
.span1
.span4
.span4
.span4
.span3
.span3
.span3
.span3
.span6
.span6
.span4
.span8
.span3
.span9
.span8
.span4
.span9
.span3
.span12

Basic grid HTML

For a simple two column layout, create a .row and add the appropriate number of .span* columns. As this is a 12-column grid, each .span* spans a number of those 12 columns, and should always add up to 12 for each row (or the number of columns in the parent).
<div class="row">
  <div class="span8">...</div>
  <div class="span4">...</div>
</div>

Nesting columns

To nest your content with the default grid, add a new .row and set of .span* columns within an existing .span* column. Nested rows should include a set of columns that add up to the number of columns of its parent.

Level 1 column
Level 2
Level 2
<div class="row">
  <div class="span6">
    Level 1 column
    <div class="row">
      <div class="span3">Level 2</div>
      <div class="span3">Level 2</div>
    </div>
  </div>
</div>

Typography

Headings

All HTML headings, <h1> through <h6> are available.

h1. Heading 1

h2. Heading 2

h3. Heading 3

h4. Heading 4

h5. Heading 5
h6. Heading 6

Emphasis classes

Convey meaning through color with a handful of emphasis utility classes.

Theme default

Donec ullamcorper nulla non metus fringilla.

<p> Donec ullamcorper <span class="color"> nulla non metus </span> fringilla.</p>
From bootstrap

1. Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

2. Etiam porta sem malesuada magna mollis euismod.

3. Donec ullamcorper nulla non metus auctor fringilla.

4. Aenean eu leo quam. Pellentesque ornare sem quam venenatis.

5. Duis mollis, non commodo luctus 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 quam venenatis.</p>
<p class="text-success">Duis mollis, non commodo luctus erat porttitor ligula.</p>

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

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.

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 a ante.</p>
  <small>Someone famous in Source Title</small>
</blockquote>
Alternate displays

Use .pull-right for a floated, right-aligned blockquote.

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

Someone famous in Source Title
<blockquote class="pull-right">
  ...
</blockquote>

List styles

Unordered

A list of items in which the order does not explicitly matter.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
<ul class="list-unordered">
  <li>Some text</li>
  <li>Some text
    <ul>
  	<li>Some text</li>
  	<li>Some text</li>
  	<li>Some text</li>
    </ul>
  </li>
  <li>Some text</li>
  <li>Some text</li>
</ul>

Ordered

A list of items in which the order does explicitly matter.

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Ac tristique libero volutpat at
  4. Faucibus porta lacus fringilla vel
<ol class="list-ordered">
  <li>Some text</li>
  <li>Some text
    <ul>
  	<li>Some text</li>
  	<li>Some text</li>
  	<li>Some text</li>
    </ul>
  </li>
  <li>Some text</li>
  <li>Some text</li>
</ol>

Checkmark list

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
<ul class="list-checkmark">
  <li>Some text</li>
  <li>Some text</li>
 
</ul>

Unstyled list

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Nulla volutpat aliquam velit
<ul class="list-unstyled">
  <li>Some text</li>
  <li>Some text</li>
  <li>Some text</li>
</ul>

Image styles

Image to left

image

Claritas est etiam processynamicus, qui quitur soluta lectorum irumtare quam littera liber. Nam dolor ligula, faucibus id sodales in qui auctor fringilla libero. Pellentesque lectorum proces tempor tellus eget hendrerit dui sem. Eodem modo typi, qui nunc nobis videntur parum clari, fiant autem sollemnes in futurum velit esse possim molestie consequat.

Image to right

image

Claritas est etiam processynamicus, qui quitur soluta lectorum irumtare quam littera liber. Nam dolor ligula, faucibus id sodales in qui auctor fringilla libero. Pellentesque lectorum proces tempor tellus eget hendrerit dui sem. Eodem modo typi, qui nunc nobis videntur parum clari, fiant autem sollemnes in futurum velit esse possim molestie consequat.

Button styles

Link text
<a href="#" class="mybtn">Link text</a>
Link text
<a href="#" class="mybtn-green">Link text</a>
Link text
<a href="#" class="mybtn-big-green">Link text</a>
Link text
<a href="#" class="mybtn-big-blue">Link text</a>

Icons

  • icon-glass
  • icon-music
  • icon-search
  • icon-envelope
  • icon-heart
  • icon-star
  • icon-star-empty
  • icon-user
  • icon-film
  • icon-th-large
  • icon-th
  • icon-th-list
  • icon-ok
  • icon-remove
  • icon-zoom-in
  • icon-zoom-out
  • icon-off
  • icon-signal
  • icon-cog
  • icon-trash
  • icon-home
  • icon-file
  • icon-time
  • icon-road
  • icon-download-alt
  • icon-download
  • icon-upload
  • icon-inbox
  • icon-play-circle
  • icon-repeat
  • icon-refresh
  • icon-list-alt
  • icon-lock
  • icon-flag
  • icon-headphones
  • icon-volume-off
  • icon-volume-down
  • icon-volume-up
  • icon-qrcode
  • icon-barcode
  • icon-tag
  • icon-tags
  • icon-book
  • icon-bookmark
  • icon-print
  • icon-camera
  • icon-font
  • icon-bold
  • icon-italic
  • icon-text-height
  • icon-text-width
  • icon-align-left
  • icon-align-center
  • icon-align-right
  • icon-align-justify
  • icon-list
  • icon-indent-left
  • icon-indent-right
  • icon-facetime-video
  • icon-picture
  • icon-pencil
  • icon-map-marker
  • icon-adjust
  • icon-tint
  • icon-edit
  • icon-share
  • icon-check
  • icon-move
  • icon-step-backward
  • icon-fast-backward
  • icon-backward
  • icon-play
  • icon-pause
  • icon-stop
  • icon-forward
  • icon-fast-forward
  • icon-step-forward
  • icon-eject
  • icon-chevron-left
  • icon-chevron-right
  • icon-plus-sign
  • icon-minus-sign
  • icon-remove-sign
  • icon-ok-sign
  • icon-question-sign
  • icon-info-sign
  • icon-screenshot
  • icon-remove-circle
  • icon-ok-circle
  • icon-ban-circle
  • icon-arrow-left
  • icon-arrow-right
  • icon-arrow-up
  • icon-arrow-down
  • icon-share-alt
  • icon-resize-full
  • icon-resize-small
  • icon-plus
  • icon-minus
  • icon-asterisk
  • icon-exclamation-sign
  • icon-gift
  • icon-leaf
  • icon-fire
  • icon-eye-open
  • icon-eye-close
  • icon-warning-sign
  • icon-plane
  • icon-calendar
  • icon-random
  • icon-comment
  • icon-magnet
  • icon-chevron-up
  • icon-chevron-down
  • icon-retweet
  • icon-shopping-cart
  • icon-folder-close
  • icon-folder-open
  • icon-resize-vertical
  • icon-resize-horizontal
  • icon-hdd
  • icon-bullhorn
  • icon-bell
  • icon-certificate
  • icon-thumbs-up
  • icon-thumbs-down
  • icon-hand-right
  • icon-hand-left
  • icon-hand-up
  • icon-hand-down
  • icon-circle-arrow-right
  • icon-circle-arrow-left
  • icon-circle-arrow-up
  • icon-circle-arrow-down
  • icon-globe
  • icon-wrench
  • icon-tasks
  • icon-filter
  • icon-briefcase
  • icon-fullscreen

How to use

All icons require an <i> tag with a unique class, prefixed with icon-. To use, place the following code just about anywhere:

<i class="icon-search"></i>

There are also styles available for inverted (white) icons, made ready with one extra class. Bootstrap specifically enforce this class on hover and active states for nav and dropdown links.


<i class="icon-tags icon-white"></i>

Heads up! When using beside strings of text, as in buttons or nav links, be sure to leave a space after the <i> tag for proper spacing.

Table styles

Simple table with hover

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table class="table table-hover">
  <thead>
    <tr>
      <th>Some text</th>
        <th>Some text</th>
      <th>Some text</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Some text</td>
      <td>Some text</td>
      <td>Some text</td>
    </tr>
     <tr>
      <td>Some text</td>
      <td>Some text</td>
      <td>Some text</td>
    </tr>
  </tbody>
</table>

Striped table with hover

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table class="table table-striped table-hover">
  <thead>
    <tr>
      <th>Some text</th>
        <th>Some text</th>
      <th>Some text</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Some text</td>
      <td>Some text</td>
      <td>Some text</td>
    </tr>
     <tr>
      <td>Some text</td>
      <td>Some text</td>
      <td>Some text</td>
    </tr>
  </tbody>
</table>

Bordered table

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table class="table table-bordered">
  <thead>
    <tr>
      <th>Some text</th>
        <th>Some text</th>
      <th>Some text</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Some text</td>
      <td>Some text</td>
      <td>Some text</td>
    </tr>
     <tr>
      <td>Some text</td>
      <td>Some text</td>
      <td>Some text</td>
    </tr>
  </tbody>
</table>