Shortcodes: Bootstrap Components

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">
<img src="http://placehold.it/260x180" alt="" ></img>
</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>


<div class="row-fluid">
<ul class="thumbnails">
<li class="span3">
<a class="thumbnail" href="#">
<img src="http://placehold.it/260x180" alt="">
</a>
</li>
<li class="span3">
<a class="thumbnail" href="#">
<img src="http://placehold.it/260x180" alt="">
</a>
</li>
<li class="span3">
<a class="thumbnail" href="#">
<img src="http://placehold.it/260x180" alt="">
</a>
</li>
<li class="span3">
<a class="thumbnail" href="#">
<img src="http://placehold.it/260x180" 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.

Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Action Action
Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Action Action
Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Action Action

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


<div class="row-fluid">
<ul class="thumbnails">
  <li class="span4">
  <div class="thumbnail">
  <img src="..." alt="...">
  <div class="caption">
  <h4>Thumbnail label</h4>
  <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
  <p>
  <a class="btn btn-primary" href="#">Action</a>
  <a class="btn btn-default" style="margin-left:10px;" href="#">Action</a>
  </p>
  </div>
  </div>
  </li>
  <li class="span4">
  <div class="thumbnail">
  <img src="..." alt="...">
  <div class="caption">
  <h4>Thumbnail label</h4>
  <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
  <p>
  <a class="btn btn-primary" href="#">Action</a>
  <a class="btn btn-default" style="margin-left:10px;" href="#">Action</a>
  </p>
  </div>
  </div>
  </li>
  <li class="span4">
  <div class="thumbnail">
  <img src="..." alt="...">
  <div class="caption">
  <h4>Thumbnail label</h4>
  <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
  <p>
  <a class="btn btn-primary" href="#">Action</a>
  <a class="btn btn-default" style="margin-left:10px;" href="#">Action</a>
  </p>
  </div>
  </div>
  </li>
  </ul>
</div>

Panels

Basic example

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

Panel heading without title

Panel content

Panel title

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

Contextual alternatives

Like other components, easily make a panel more meaningful to a particular context by adding any of the contextual state classes.

Panel primary

Panel content

Panel success

Panel content

Panel info

Panel content

Panel warning

Panel content

Panel danger

Panel content

<div class="panel panel-primary">...</div>
<div class="panel panel-success">...</div>
<div class="panel panel-info">...</div>
<div class="panel panel-warning">...</div>
<div class="panel panel-danger">...</div>