Components

Content Boxes

Icon Boxes

In this example, the icon-boxes are set up in a 4 column grid system using row-fluid and span3.

<div class="row-fluid">
  <div class="iconbox span3">
    <div class="iconcircle">
      <i class="far fa-lightbulb"></i>
    </div>
    <div class="iconbox-content">
      ...
    </div>
  </div>
  <div class="iconbox span3">...</div>
  <div class="iconbox span3">...</div>
<div class="iconbox span3">...</div>

Text Boxes

<div class="text-box">
  <div class="text-box-heading">Some heading</div>
  <div class="arrow-down"></div>
  <p>Lorem ipsum ...</p>
</div>

Image Boxes

In this example, the icon-boxes are set up in a 3 column grid system using row-fluid and span4.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Read More

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Read More

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Read More

<div class="row-fluid">
  <div class="image-box span4">
    <img src="..."  class="img-responsive">
    <div class="image-box-content"><p>Lorem ipsum ...</p></div>
  </div>
  <div class="image-box span4">
    ...
  </div>
  <div class="image-box span4">
    ...
  </div>
</div>

Buttons

Use any of the available button classes to quickly create a styled button.

<!-- Standard button -->
<button type="button" class="btn btn-default">Default</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">Primary</button>

<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">Success</button>

<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">Info</button>

<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">Warning</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">Danger</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">Link</button>

You can use the <a> tag with the available button classes and also style the buttons using Font Awesome.

<a class="btn btn-danger" href="#"><i class="fa fa-trash-o fa-lg"></i> Delete</a>
<a class="btn btn-default" href="#"><i class="fa fa-plus-square"></i> Read more...</a>
<a class="btn btn-info" href="#"><i class="fa fa-download fa-3x pull-left"></i> Click here to download!</a>

With Bootstraps support for collapsible components you can use buttons to show or hide special contents. Keep your courses clean and avoid the scroll of death!

<p>
<button class="btn btn-danger collapsed" data-target="#demo" data-toggle="collapse" type="button">CLICK HERE!</button>
</p>
<div style="height: 0px;" id="demo" class="collapse">
<iframe src="//www.youtube.com/embed/CuKhBKAgQcA" allowfullscreen="" height="315" width="560" frameborder="0"></iframe>
</div>

Grid System

Bootstrap's default grid system

Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases.

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-fluid">
<div class="span4">...</div>
<div class="span8">...</div>
</div>

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

Colored columns

<div class="row-fluid">
<div class="span4"><h5>A single column</h5><p>lorem ipsum...</p></div>
<div class="span4">...</div>
<div class="span4">...</div>
<div class="span4">...</div>
</div>

<div class="row-fluid colored">
<div class="span4"><h5>A single colored column</h5><p>lorem ipsum...</p></div>
<div class="span4">...</div>
<div class="span4">...</div>
<div class="span4">...</div>
</div>

Thumbnails

Default thumbnails

By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.

<div class="row-fluid">
  <ul class="thumbnails">
    <li class="span4">
      <a href="..." class="thumbnail"><img data-src="..." alt="..."></a>
    </li>
     ...
  </ul>
</div>

Highly customizable

With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.

<div class="row-fluid">
  <ul class="thumbnails">
  <li class="span4">
    <div class="thumbnail">
      <img data-src="..." alt="...">
      <h3>Thumbnail label</h3>
      <p>...</p>
    </div>
  </li>
  </ul>
</div>

Blocknumbers

In this example, the blocknumbers are set up in a 3 column grid system using row-fluid and span4. Blocknumbers can contain numbers as well as letters and font aweseome icons.

<div class="row-fluid">
  <div class="span4">
    <div class="blocknumber_box">
      <div class="blocknumber_icon">
        1
      </div>
      <div class="blocknumber_content">
        <h5>First Heading</h5>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </div>
    </div>
  </div>
  <div class="span4">
    <div class="blocknumber_box">
      ...
    </div>
  </div>
  ...
</div>

Panels

Basic example

By default, all the .panel does is apply some basic border and padding to contain some content.

<div class="panel panel-default">
  <div class="panel-heading">Panel heading without title</div>
  <div class="panel-body">
    Panel content
  </div>
</div>
<div class="panel panel-default"> 
  <div class="panel-heading">
    <h3 class="panel-title">Panel title</h3>
  </div>
  <div class="panel-body">
    Panel content
  </div>
</div>

Tabs

Add quick, dynamic tab functionality to transition through panes of local content, even via dropdown menus.

<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
  <li class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li>
  <li><a href="#profile" role="tab" data-toggle="tab">Profile</a></li>
  <li><a href="#messages" role="tab" data-toggle="tab">Messages</a></li>
  <li><a href="#settings" role="tab" data-toggle="tab">Settings</a></li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane active" id="home">...</div>
  <div class="tab-pane" id="profile">...</div>
  <div class="tab-pane" id="messages">...</div>
  <div class="tab-pane" id="settings">...</div>
</div>

Tables

Default styles

For basic styling - light padding and only horizontal dividers - add the base class .table to any <table>.

<table class="table">
  ...
</table>

Striped rows

Use .table-striped to add zebra-striping to any table row within the <tbody>.

<table class="table table-striped">
  ...
</table>

Bordered table

Add .table-bordered for borders on all sides of the table and cells.

<table class="table table-bordered">
  ...
</table>

Hover rows

Add .table-hover to enable a hover state on table rows within a <tbody>.

<table class="table table-hover">
  ...
</table>

Condensed table

Add .table-condensed to make tables more compact by cutting cell padding in half.

<table class="table table-condensed">
  ...
</table>

Contextual classes

Use contextual classes to color table rows or individual cells.

<!-- On rows -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="active">...</td>
  <td class="success">...</td>
  <td class="warning">...</td>
  <td class="danger">...</td>
  <td class="info">...</td>
</tr>

Accordion

Sample accordion

Using the collapse plugin, we built a simple accordion by extending the panel component.

<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
        Collapsible Group Item #1
      </a>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in">
      <div class="panel-body">
        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>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" class="collapsed">
        Collapsible Group Item #2
      </a>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse">
      <div class="panel-body">
        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>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree"class="collapsed">
        Collapsible Group Item #3
      </a>
    </div>
    <div id="collapseThree" class="panel-collapse collapse">
      <div class="panel-body">
        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>
    </div>
  </div>
</div>

Carousel

Example

The slideshow below shows a generic plugin and component for cycling through elements like a carousel.

First slide label

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

Second slide label

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

Third slide label

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

‹ ›

<div id="myCarousel" class="carousel slide">
<ol class="carousel-indicators">
  <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
  <li data-target="#myCarousel" data-slide-to="1"></li>
  <li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Carousel items -->
<div class="carousel-inner">
  <div class="active item">
    <img src="..." alt="...">
    <div class="carousel-caption">
      <h3>...</h3>
      <p>...</p>
    </div>
  </div>
  <div class="item">...</div>
  <div class="item">...</div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div>

Carousel with set of thumbnails

Example

The carousel below shows a generic plugin and component for cycling through multiple elements.

<div id="myCarousel" class="carousel slide">
  <div class="carousel-inner">
  <div class="item active">
    <ul class="thumbnails">
      <li>
        <div class="thumbnail">
        <img src="..." alt="">
        </div>
      </li>
      <li>
        <div class="thumbnail">
        <img src="..." alt="">
        </div>
      </li>
    </ul>
  </div>
  <div class="item">
    <ul class="thumbnails">
      <li>...</li>
      <li>...</li>
    </ul>
  </div>
  <div class="item">
    ...
  </div>
  </div>
<a data-slide="prev" href="#myCarousel" class="left carousel-control">‹</a>
<a data-slide="next" href="#myCarousel" class="right carousel-control">›</a>
</div>

Spotlights

The spotlight classes are designed to highlight your general announcements, top content and generally everything that is the best in your website

<div class="spotlight spotlight-v1">
  ...
</div>

<div class="spotlight spotlight-v2">
  ...
</div>

<div class="spotlight spotlight-v3">
  ...
</div>

<div class="spotlight spotlight-v4">
  ...
</div>

<div class="spotlight spotlight-v5">
  ...
</div>

You can add a shadow class to the spotlight boxes:

<div class="spotlight spotlight-v2 shadow1">
  ...
</div>

<div class="spotlight spotlight-v2 shadow2">
  ...
</div>

You can add an arrow to the top or bottom of the spotlight-v1 container:

<div class="spotlight spotlight-v1 arrow-top">
  ...
</div>

<div class="spotlight spotlight-v1 arrow-bottom">
  ...
</div>