Grid example

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.

1
1
1
1
1
1
1
1
1
3
4
4
4
8

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>

Given this example, we have .span8 and .span4, making for 12 total columns and a complete row.

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="span8">
    Level 1 column
    <div class="row">
      <div class="span4">Level 2</div>
      <div class="span4">Level 2</div>
    </div>
  </div>
</div>

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

Bold

For emphasizing a snippet of text with a heavier font-weight.

The following snippet of text is rendered as bold text.

<strong>rendered as bold text</strong>

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>

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
  • Nulla volutpat aliquam velit
<ul class="list-checkmark">
  <li>Some text</li>
  <li>Some text</li>
  <li>Some text</li>
</ul>

Arrow list

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Faucibus porta lacus fringilla vel
<ol class="list-arrow">
  <li>Some text</li>
  <li>Some text</li>
  <li>Some text</li>
</ol>

This is simple box

Claritas est etiam processynamicus, qui quitur mutationem lectorum irumtare quam littera liber tempor soluta

<div class="box"> 
Some text here
</div>

This is info box

Claritas est etiam processynamicus, qui quitur mutationem lectorum irumtare quam littera liber tempor soluta

<div class="box info"> 
Some text here
</div>

This is quote box

Claritas est etiam processynamicus, qui quitur mutationem lectorum irumtare quam littera liber tempor soluta

<div class="box review"> 
Some text here
</div>

Styled box

Claritas est etiam processynamicus, qui quitur mutationemconsuetudium lectorum irumtare quam littera liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming.
<div class="box-styled">
  <div class="box-head clearfix">
    <h4>Some heading here</h4>
  </div>
  <div class="box-body"> 
    Some text here
  </div>
</div>

Styled box for review

Claritas est etiam processynamicus, qui quitur mutationemconsuetudium lectorum irumtare quam littera liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming.
<div class="box-styled">
  <div class="box-head clearfix">
    <h4>Some heading here</h4>
  </div>
  <div class="box-body review"> 
    Some text here
  </div>
</div>

Styled box for info

Claritas est etiam processynamicus, qui quitur mutationemconsuetudium lectorum irumtare quam littera liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming.
<div class="box-styled">
  <div class="box-head clearfix">
    <h4>Some heading here</h4>
  </div>
  <div class="box-body info"> 
    Some text here
  </div>
</div>

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.

<img src="" alt="image" class="img-left"> 

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.

<img src="" alt="image" class="img-right"> 

Image with frame

image
<div class="frame"> <img src="img/preview/thumb-1.jpg" alt="image"> </div> 

Image to left with frame

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.

<img src="" alt="image" class="img-left frame"> 

Image to right with frame

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.

<img src="" alt="image" class="img-right frame"> 

Image with icon at bottom center

img icon
<div class="frame-icon">
  <img src="" alt="img"/> 
  <span class="icon-bg">
    <img src="img/icons/icon-posttype-polaroid.png" alt="icon">
  </span>
</div>

Tabs

Tab 1 content here
Tab 2 content here
Tabs 3 content here
<ul class="nav nav-tabs" id="myTab">
    <li class="active"><a href="#A">Tab 1</a></li>
    <li><a href="#B"> Tab 2</a></li>
    <li><a href="#C">Tab 3</a></li>
</ul>
<div class="tab-content"> 
    <div class="tab-pane active" id="A"> Tab 1 content here </div>
    <div class="tab-pane" id="B"> Tab 2 content here </div>
    <div class="tab-pane" id="C"> Tabs 3 content here </div>
</div>

Accordion

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch keffiyeh helvetica. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
<div class="accordion" id="accordion2">
  <div class="accordion-group">
    <div class="accordion-heading in_head">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
        Collapsible Group Item #1
      </a>
    </div>
    <div id="collapseOne" class="accordion-body collapse in">
      <div class="accordion-inner">
        Anim pariatur cliche...
      </div>
    </div>
  </div>
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
        Collapsible Group Item #2
      </a>
    </div>
    <div id="collapseTwo" class="accordion-body collapse">
      <div class="accordion-inner">
        Anim pariatur cliche...
      </div>
    </div>
  </div>
</div>
...