Styling


Typography

Here’s what you need to write and style your documents.

  1. Headings

    1. Anchor titles
  2. Text colors

Headings

All HTML headings, <h1> through <h6>, are available. .h1 through .h6 classes are also available, for when you want to match the font styling of a heading but still want your text to be displayed inline.

h1. theDocs heading

h2. theDocs heading

h3. theDocs heading

h4. theDocs heading

h5. theDocs heading
h6. theDocs heading


<h1>h1. theDocs heading</h1>
<h2>h2. theDocs heading</h2>
<h3>h3. theDocs heading</h3>
<h4>h4. theDocs heading</h4>
<h5>h5. theDocs heading</h5>
<h6>h6. theDocs heading</h6>

Create lighter, secondary text in any heading with a generic <small> tag or the .small class.

h1. theDocs heading Secondary text

h2. theDocs heading Secondary text

h3. theDocs heading Secondary text

h4. theDocs heading Secondary text

h5. theDocs heading Secondary text
h6. theDocs heading Secondary text


<h1>h1. theDocs heading <small>Secondary text</small></h1>
<h2>h2. theDocs heading <small>Secondary text</small></h2>
<h3>h3. theDocs heading <small>Secondary text</small></h3>
<h4>h4. theDocs heading <small>Secondary text</small></h4>
<h5>h5. theDocs heading <small>Secondary text</small></h5>
<h6>h6. theDocs heading <small>Secondary text</small></h6>

Anchor titles

Add an id attribute to a heading, if you want to make the accessible through a link.

h1. theDocs heading

h2. theDocs heading

h3. theDocs heading

h4. theDocs heading

h5. theDocs heading
h6. theDocs heading


<h1 id="sample-heading1">h1. theDocs heading</h1>
<h2 id="sample-heading2">h2. theDocs heading</h2>
<h3 id="sample-heading3">h3. theDocs heading</h3>
<h4 id="sample-heading4">h4. theDocs heading</h4>
<h5 id="sample-heading5">h5. theDocs heading</h5>
<h6 id="sample-heading6">h6. theDocs heading</h6>

Text colors

Use follwoing contextual classes to change color of text.

This is a normal paragraph without any contectual classes.

A paragraph with .text-primary class.

A paragraph with .text-success class.

A paragraph with .text-info class.

A paragraph with .text-warning class.

A paragraph with .text-danger class.

A paragraph with .text-purple class.

A paragraph with .text-teal class.

A paragraph with .text-gray class.

A paragraph with .text-dark class.

A paragraph with .text-white class.


<p>This is a normal paragraph without any contectual classes.</p>
<p class="text-primary">A paragraph with .text-primary class.</p>
<p class="text-success">A paragraph with .text-success class.</p>
<p class="text-info">A paragraph with .text-info class.</p>
<p class="text-warning">A paragraph with .text-warning class.</p>
<p class="text-danger">A paragraph with .text-danger class.</p>
<p class="text-purple">A paragraph with .text-purple class.</p>
<p class="text-teal">A paragraph with .text-teal class.</p>
<p class="text-gray">A paragraph with .text-gray class.</p>
<p class="text-dark">A paragraph with .text-dark class.</p>
<p class="text-white">A paragraph with .text-white class.</p>

Buttons

Use the button classes on an <a>, <button>, or <input> element.

  1. Regular
  2. Outline
  3. Round
  4. Block level
  5. Iconic
  6. Icon and Text

Regular

Use any of the available button classes to quickly create a styled button. Fancy larger or smaller buttons? Add .btn-xs, .btn-sm, .btn-lg, or .btn-xl for additional sizes.


<button type="button" class="btn btn-xs btn-default">Default</button>
<button type="button" class="btn btn-xs btn-primary">Primary</button>
<button type="button" class="btn btn-xs btn-success">Success</button>
<button type="button" class="btn btn-xs btn-info">Info</button>
<button type="button" class="btn btn-xs btn-warning">Warning</button>
<button type="button" class="btn btn-xs btn-danger">Danger</button>
<button type="button" class="btn btn-xs btn-purple">Purple</button>
<button type="button" class="btn btn-xs btn-teal">Teal</button>
<button type="button" class="btn btn-xs btn-dark">Dark</button>
<button type="button" class="btn btn-xs btn-white">White</button>
<button type="button" class="btn btn-xs btn-link">Link</button>

<br><br>

<button type="button" class="btn btn-sm btn-default">Default</button>
<button type="button" class="btn btn-sm btn-primary">Primary</button>
<button type="button" class="btn btn-sm btn-success">Success</button>
<button type="button" class="btn btn-sm btn-info">Info</button>
<button type="button" class="btn btn-sm btn-warning">Warning</button>
<button type="button" class="btn btn-sm btn-danger">Danger</button>
<button type="button" class="btn btn-sm btn-purple">Purple</button>
<button type="button" class="btn btn-sm btn-teal">Teal</button>
<button type="button" class="btn btn-sm btn-dark">Dark</button>
<button type="button" class="btn btn-sm btn-white">White</button>
<button type="button" class="btn btn-sm btn-link">Link</button>

<br><br>

<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-purple">Purple</button>
<button type="button" class="btn btn-teal">Teal</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-white">White</button>
<button type="button" class="btn btn-link">Link</button>

<br><br>

<button type="button" class="btn btn-lg btn-default">Default</button>
<button type="button" class="btn btn-lg btn-primary">Primary</button>
<button type="button" class="btn btn-lg btn-success">Success</button>
<button type="button" class="btn btn-lg btn-info">Info</button>
<button type="button" class="btn btn-lg btn-warning">Warning</button>
<button type="button" class="btn btn-lg btn-danger">Danger</button>
<button type="button" class="btn btn-lg btn-purple">Purple</button>
<button type="button" class="btn btn-lg btn-teal">Teal</button>
<button type="button" class="btn btn-lg btn-dark">Dark</button>
<button type="button" class="btn btn-lg btn-white">White</button>
<button type="button" class="btn btn-lg btn-link">Link</button>

<br><br>

<button type="button" class="btn btn-xl btn-default">Default</button>
<button type="button" class="btn btn-xl btn-primary">Primary</button>
<button type="button" class="btn btn-xl btn-success">Success</button>
<button type="button" class="btn btn-xl btn-info">Info</button>
<button type="button" class="btn btn-xl btn-warning">Warning</button>
<button type="button" class="btn btn-xl btn-danger">Danger</button>
<button type="button" class="btn btn-xl btn-purple">Purple</button>
<button type="button" class="btn btn-xl btn-teal">Teal</button>
<button type="button" class="btn btn-xl btn-dark">Dark</button>
<button type="button" class="btn btn-xl btn-white">White</button>
<button type="button" class="btn btn-xl btn-link">Link</button>

Outline

Simply add .btn-outline to the button markup.


<button type="button" class="btn btn-outline btn-xs btn-primary">Primary</button>
<button type="button" class="btn btn-outline btn-xs btn-success">Success</button>
<button type="button" class="btn btn-outline btn-xs btn-info">Info</button>
<button type="button" class="btn btn-outline btn-xs btn-warning">Warning</button>
<button type="button" class="btn btn-outline btn-xs btn-danger">Danger</button>
<button type="button" class="btn btn-outline btn-xs btn-purple">Purple</button>
<button type="button" class="btn btn-outline btn-xs btn-teal">Teal</button>
<button type="button" class="btn btn-outline btn-xs btn-dark">Dark</button>

<br><br>

<button type="button" class="btn btn-outline btn-sm btn-primary">Primary</button>
<button type="button" class="btn btn-outline btn-sm btn-success">Success</button>
<button type="button" class="btn btn-outline btn-sm btn-info">Info</button>
<button type="button" class="btn btn-outline btn-sm btn-warning">Warning</button>
<button type="button" class="btn btn-outline btn-sm btn-danger">Danger</button>
<button type="button" class="btn btn-outline btn-sm btn-purple">Purple</button>
<button type="button" class="btn btn-outline btn-sm btn-teal">Teal</button>
<button type="button" class="btn btn-outline btn-sm btn-dark">Dark</button>

<br><br>

<button type="button" class="btn btn-outline btn-primary">Primary</button>
<button type="button" class="btn btn-outline btn-success">Success</button>
<button type="button" class="btn btn-outline btn-info">Info</button>
<button type="button" class="btn btn-outline btn-warning">Warning</button>
<button type="button" class="btn btn-outline btn-danger">Danger</button>
<button type="button" class="btn btn-outline btn-purple">Purple</button>
<button type="button" class="btn btn-outline btn-teal">Teal</button>
<button type="button" class="btn btn-outline btn-dark">Dark</button>

<br><br>

<button type="button" class="btn btn-outline btn-lg btn-primary">Primary</button>
<button type="button" class="btn btn-outline btn-lg btn-success">Success</button>
<button type="button" class="btn btn-outline btn-lg btn-info">Info</button>
<button type="button" class="btn btn-outline btn-lg btn-warning">Warning</button>
<button type="button" class="btn btn-outline btn-lg btn-danger">Danger</button>
<button type="button" class="btn btn-outline btn-lg btn-purple">Purple</button>
<button type="button" class="btn btn-outline btn-lg btn-teal">Teal</button>
<button type="button" class="btn btn-outline btn-lg btn-dark">Dark</button>

Round

Simply add .btn-round to the button markup.


<button type="button" class="btn btn-round btn-xs btn-primary">Primary</button>
<button type="button" class="btn btn-round btn-xs btn-success">Success</button>
<button type="button" class="btn btn-round btn-xs btn-info">Info</button>
<button type="button" class="btn btn-round btn-xs btn-warning">Warning</button>
<button type="button" class="btn btn-round btn-xs btn-danger">Danger</button>
<button type="button" class="btn btn-round btn-xs btn-purple">Purple</button>
<button type="button" class="btn btn-round btn-xs btn-teal">Teal</button>
<button type="button" class="btn btn-round btn-xs btn-dark">Dark</button>

<br><br>

<button type="button" class="btn btn-round btn-sm btn-primary">Primary</button>
<button type="button" class="btn btn-round btn-sm btn-success">Success</button>
<button type="button" class="btn btn-round btn-sm btn-info">Info</button>
<button type="button" class="btn btn-round btn-sm btn-warning">Warning</button>
<button type="button" class="btn btn-round btn-sm btn-danger">Danger</button>
<button type="button" class="btn btn-round btn-sm btn-purple">Purple</button>
<button type="button" class="btn btn-round btn-sm btn-teal">Teal</button>
<button type="button" class="btn btn-round btn-sm btn-dark">Dark</button>

<br><br>

<button type="button" class="btn btn-round btn-primary">Primary</button>
<button type="button" class="btn btn-round btn-success">Success</button>
<button type="button" class="btn btn-round btn-info">Info</button>
<button type="button" class="btn btn-round btn-warning">Warning</button>
<button type="button" class="btn btn-round btn-danger">Danger</button>
<button type="button" class="btn btn-round btn-purple">Purple</button>
<button type="button" class="btn btn-round btn-teal">Teal</button>
<button type="button" class="btn btn-round btn-dark">Dark</button>

<br><br>

<button type="button" class="btn btn-round btn-lg btn-primary">Primary</button>
<button type="button" class="btn btn-round btn-lg btn-success">Success</button>
<button type="button" class="btn btn-round btn-lg btn-info">Info</button>
<button type="button" class="btn btn-round btn-lg btn-warning">Warning</button>
<button type="button" class="btn btn-round btn-lg btn-danger">Danger</button>
<button type="button" class="btn btn-round btn-lg btn-purple">Purple</button>
<button type="button" class="btn btn-round btn-lg btn-teal">Teal</button>
<button type="button" class="btn btn-round btn-lg btn-dark">Dark</button>

Block level

Create block level buttons—those that span the full width of a parent— by adding .btn-block.



<button type="button" class="btn btn-block btn-success">Success</button>
<button type="button" class="btn btn-block btn-info">Info</button>
<button type="button" class="btn btn-block btn-warning">Warning</button>
<br>
<div class="row">
  <div class="col-md-6">
    <button type="button" class="btn btn-block btn-primary">Primary</button>
    <button type="button" class="btn btn-block btn-danger">Danger</button>
  </div>

  <div class="col-md-6">
    <button type="button" class="btn btn-block btn-purple">Purple</button>
    <button type="button" class="btn btn-block btn-teal">Teal</button>
  </div>
</div>

Iconic


<button type="button" class="btn btn-xs btn-default"><i class="fa fa-apple"></i></button>
<button type="button" class="btn btn-xs btn-primary"><i class="fa fa-facebook"></i></button>
<button type="button" class="btn btn-xs btn-danger"><i class="fa fa-google-plus"></i></button>
<button type="button" class="btn btn-xs btn-info"><i class="fa fa-twitter"></i></button>
<button type="button" class="btn btn-xs btn-dark"><i class="fa fa-git"></i></button>
<button type="button" class="btn btn-xs btn-outline btn-purple"><i class="fa fa-send"></i></button>
<button type="button" class="btn btn-xs btn-outline btn-warning"><i class="fa fa-rss"></i></button>
<button type="button" class="btn btn-xs btn-outline btn-teal"><i class="fa fa-thumbs-up"></i></button>

<br><br>

<button type="button" class="btn btn-sm btn-default"><i class="fa fa-apple"></i></button>
<button type="button" class="btn btn-sm btn-primary"><i class="fa fa-facebook"></i></button>
<button type="button" class="btn btn-sm btn-danger"><i class="fa fa-google-plus"></i></button>
<button type="button" class="btn btn-sm btn-info"><i class="fa fa-twitter"></i></button>
<button type="button" class="btn btn-sm btn-dark"><i class="fa fa-git"></i></button>
<button type="button" class="btn btn-sm btn-outline btn-purple"><i class="fa fa-send"></i></button>
<button type="button" class="btn btn-sm btn-outline btn-warning"><i class="fa fa-rss"></i></button>
<button type="button" class="btn btn-sm btn-outline btn-teal"><i class="fa fa-thumbs-up"></i></button>

<br><br>

<button type="button" class="btn btn-default"><i class="fa fa-apple"></i></button>
<button type="button" class="btn btn-primary"><i class="fa fa-facebook"></i></button>
<button type="button" class="btn btn-danger"><i class="fa fa-google-plus"></i></button>
<button type="button" class="btn btn-info"><i class="fa fa-twitter"></i></button>
<button type="button" class="btn btn-dark"><i class="fa fa-git"></i></button>
<button type="button" class="btn btn-outline btn-purple"><i class="fa fa-send"></i></button>
<button type="button" class="btn btn-outline btn-warning"><i class="fa fa-rss"></i></button>
<button type="button" class="btn btn-outline btn-teal"><i class="fa fa-thumbs-up"></i></button>

<br><br>

<button type="button" class="btn btn-lg btn-default"><i class="fa fa-apple"></i></button>
<button type="button" class="btn btn-lg btn-primary"><i class="fa fa-facebook"></i></button>
<button type="button" class="btn btn-lg btn-danger"><i class="fa fa-google-plus"></i></button>
<button type="button" class="btn btn-lg btn-info"><i class="fa fa-twitter"></i></button>
<button type="button" class="btn btn-lg btn-dark"><i class="fa fa-git"></i></button>
<button type="button" class="btn btn-lg btn-outline btn-purple"><i class="fa fa-send"></i></button>
<button type="button" class="btn btn-lg btn-outline btn-warning"><i class="fa fa-rss"></i></button>
<button type="button" class="btn btn-lg btn-outline btn-teal"><i class="fa fa-thumbs-up"></i></button>

Icon and Text


<button type="button" class="btn btn-xs btn-default"><i class="fa fa-download"></i> Download</button>
<button type="button" class="btn btn-xs btn-primary"><i class="fa fa-print"></i> Print</button>
<button type="button" class="btn btn-xs btn-success"><i class="fa fa-check-square-o"></i> Checked</button>
<button type="button" class="btn btn-xs btn-outline btn-info"><i class="fa fa-info-circle"></i> Information</button>
<button type="button" class="btn btn-xs btn-outline btn-warning"><i class="fa fa-warning"></i> Warning</button>
<button type="button" class="btn btn-xs btn-outline btn-danger"><i class="fa fa-heart"></i> With love</button>

<br><br>

<button type="button" class="btn btn-sm btn-default"><i class="fa fa-download"></i> Download</button>
<button type="button" class="btn btn-sm btn-primary"><i class="fa fa-print"></i> Print</button>
<button type="button" class="btn btn-sm btn-success"><i class="fa fa-check-square-o"></i> Checked</button>
<button type="button" class="btn btn-sm btn-outline btn-info"><i class="fa fa-info-circle"></i> Information</button>
<button type="button" class="btn btn-sm btn-outline btn-warning"><i class="fa fa-warning"></i> Warning</button>
<button type="button" class="btn btn-sm btn-outline btn-danger"><i class="fa fa-heart"></i> With love</button>

<br><br>

<button type="button" class="btn btn-default"><i class="fa fa-download"></i> Download</button>
<button type="button" class="btn btn-primary"><i class="fa fa-print"></i> Print</button>
<button type="button" class="btn btn-success"><i class="fa fa-check-square-o"></i> Checked</button>
<button type="button" class="btn btn-outline btn-info"><i class="fa fa-info-circle"></i> Information</button>
<button type="button" class="btn btn-outline btn-warning"><i class="fa fa-warning"></i> Warning</button>
<button type="button" class="btn btn-outline btn-danger"><i class="fa fa-heart"></i> With love</button>

<br><br>

<button type="button" class="btn btn-lg btn-default"><i class="fa fa-download"></i> Download</button>
<button type="button" class="btn btn-lg btn-primary"><i class="fa fa-print"></i> Print</button>
<button type="button" class="btn btn-lg btn-success"><i class="fa fa-check-square-o"></i> Checked</button>
<button type="button" class="btn btn-lg btn-outline btn-info"><i class="fa fa-info-circle"></i> Information</button>
<button type="button" class="btn btn-lg btn-outline btn-warning"><i class="fa fa-warning"></i> Warning</button>
<button type="button" class="btn btn-lg btn-outline btn-danger"><i class="fa fa-heart"></i> With love</button>

Labels

You can highlight part of your text by placing it inside a .label class.

  1. Available variations
  2. Labels in header
  3. Icon in labels

Available variations

Add any of the below mentioned modifier classes to change the appearance of a label.

Default
Primary
Success
Info
Warning
Danger
Purple
Teal
Dark

<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>
<span class="label label-purple">Purple</span>
<span class="label label-teal">Teal</span>
<span class="label label-dark">Dark</span>

Labels in header

You can use labels inside a heading tag. Label will changes its size based on the heading size.

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New
Example heading New


<h1>Example heading <span class="label label-teal">New</span></h1>
<h2>Example heading <span class="label label-teal">New</span></h2>
<h3>Example heading <span class="label label-teal">New</span></h3>
<h4>Example heading <span class="label label-teal">New</span></h4>
<h5>Example heading <span class="label label-teal">New</span></h5>
<h6>Example heading <span class="label label-teal">New</span></h6>

Icon in labels

Labels can accompany icons as well.

a delicious coffee
Float in clouds
Danger

<span class="label label-default">a delicious coffee <i class="fa fa-coffee"></i></span>
<span class="label label-primary"><i class="fa fa-cloud"></i> Float in clouds</span>
<span class="label label-danger"><i class="fa fa-exclamation-circle"></i> Danger <i class="fa fa-exclamation-circle"></i></span>

Tables

Table is a great way to display some related information together. In this page, we show how you can use different type of tables supported in theDocs.

  1. Basic Tables
  2. Options Table
  3. Information Table
  4. Changelog Table

Basic Tables

For basic styling—light padding and only horizontal dividers—add the base class .table to any <table>. It may seem super redundant, but given the widespread use of tables for other plugins like calendars and date pickers, we’ve opted to isolate our custom table styles.

Optional table caption.
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

<table class="table">
  <caption>Optional table caption.</caption>
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Options Table

Options table can be used for describing a function, event, class, etc. Make sure you’ll wrap your table indside .table-responsive and your table has classes of .table, .table-bordered and .table-striped.

Name type default description
interval number 5000 The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle.
pause string “hover” Pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on mouseleave.
delay number | object 0 Delay showing and hiding the popover (ms) – does not apply to manual trigger type if a number is supplied, delay is applied to both hide/show object structure is: delay: { "show": 500, "hide": 100 }
wrap boolean true Whether the carousel should cycle continuously or have hard stops.
keyboard boolean true Whether the carousel should react to keyboard events.


<div class="table-responsive">
  <table class="table table-bordered table-striped">
    <thead>
      <tr>
        <th>Name</th>
        <th>type</th>
        <th>default</th>
        <th>description</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>interval</td>
        <td>number</td>
        <td>5000</td>
        <td>The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle.</td>
      </tr>
      <tr>
        <td>pause</td>
        <td>string</td>
        <td>"hover"</td>
        <td>Pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on mouseleave.</td>
      </tr>
      <tr>
        <td>delay</td>
        <td>number | object</td>
        <td>0</td>
        <td>
          <p>Delay showing and hiding the popover (ms) - does not apply to manual trigger type</p>
          <p>If a number is supplied, delay is applied to both hide/show</p>
          <p>Object structure is: <code>delay: { "show": 500, "hide": 100 }</code></p>
        </td>
      </tr>
      <tr>
        <td>wrap</td>
        <td>boolean</td>
        <td>true</td>
        <td>Whether the carousel should cycle continuously or have hard stops.</td>
      </tr>
      <tr>
        <td>keyboard</td>
        <td>boolean</td>
        <td>true</td>
        <td>Whether the carousel should react to keyboard events.</td>
      </tr>
    </tbody>
  </table>
</div>

Information Table

You can use this type of table to describe several related key-value-paired options. Your table has to include these classes: .table, .table-bordered, .table-striped and .table-info.

Theme name: theDocs
Description: A starter theme for developing your next software documentation. It’s based on Twitter Bootstrap and has basic elements that you’ll fequently use them.
Created: 05 September 2015
Last Update: 05 September 2015
Documentation: Well documented
Layout: Responsive

<table class="table table-bordered table-striped table-info">
  <tbody>
    <tr>
      <td>Theme name:</td>
      <td>theDocs</td>
    </tr>
    <tr>
      <td>Description:</td>
      <td>A starter theme for developing your next software documentation. It's based on Twitter Bootstrap and has basic elements that you'll fequently use them.</td>
    </tr>
    <tr>
      <td>Created:</td>
      <td>05 September 2015</td>
    </tr>
    <tr>
      <td>Last Update:</td>
      <td>05 September 2015</td>
    </tr>
    <tr>
      <td>Documentation:</td>
      <td>Well documented</td>
    </tr>
    <tr>
      <td>Layout:</td>
      <td>Responsive</td>
    </tr>
  </tbody>
</table>

Changelog Table

Your product will update regularly? Of course yes! So you need to keep track of your changelog and show them to your customers. Use this table to simply creat a changelog table. Including .table-changelog to your table is mandatory.

Action Details
When you have added a new feature to your application
When you have improved a feature or updated a plugin to new version
When a bug has fixed
When a file or feature has removed from application
When two or several files/features have merged together
When a file or peace of code moved to another place

<table class="table table-bordered table-striped table-changelog">
  <thead>
    <tr>
      <th>Action</th>
      <th>Details</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><span class="change change-added"></span></td>
      <td>When you have added a new feature to your application</td>
    </tr>
    <tr>
      <td><span class="change change-updated"></span></td>
      <td>When you have improved a feature or updated a plugin to new version</td>
    </tr>
    <tr>
      <td><span class="change change-fixed"></span></td>
      <td>When a bug has fixed</td>
    </tr>
    <tr>
      <td><span class="change change-removed"></span></td>
      <td>When a file or feature has removed from application</td>
    </tr>
    <tr>
      <td><span class="change change-merged"></span></td>
      <td>When two or several files/features have merged together</td>
    </tr>
    <tr>
      <td><span class="change change-moved"></span></td>
      <td>When a file or peace of code moved to another place</td>
    </tr>
  </tbody>
</table>

Changelog list

If you need more clean and easy making changelog component, you can use changelog lists.

  • When you have added a new feature to your application
  • When you have improved a feature or updated a plugin to new version
  • When a bug has fixed
  • When a file or feature has removed from application
  • When two or several files/features have merged together
  • When a file or peace of code moved to another place

<ul class="changelog">
  <li class="ch-added">When you have added a new feature to your application</li>
  <li class="ch-updated">When you have improved a feature or updated a plugin to new version</li>
  <li class="ch-fixed">When a bug has fixed</li>
  <li class="ch-removed">When a file or feature has removed from application</li>
  <li class="ch-merged">When two or several files/features have merged together</li>
  <li class="ch-moved">When a file or peace of code moved to another place</li>
</ul>

Alerts

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.

  1. Default alerts

    1. Dismissible alerts
    2. Links in alerts
  2. Callouts

Default alerts

Wrap any text and an optional dismiss button in .alert and one of the four contextual classes (e.g., .alert-success) for basic alert messages.


<div class="alert alert-success" role="alert">...</div>
<div class="alert alert-info" role="alert">...</div>
<div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-danger" role="alert">...</div>

Dismissible alerts

Build on any alert by adding an optional .alert-dismissible and close button.


<div class="alert alert-warning alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>

Use the .alert-link utility class to quickly provide matching colored links within any alert.


<div class="alert alert-success" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-info" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-warning" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-danger" role="alert">
  <a href="#" class="alert-link">...</a>
</div>

Callouts

Callouts also are alerts, but in different style.


<div class="callout callout-success" role="alert">
  <h4>Well done!</h4>
  <p>You successfully read this important alert message.</p>
</div>

<div class="callout callout-info" role="alert">
  <h4>Heads up!</h4>
  <p>This alert needs your attention, but it's not super important.</p>
</div>

<div class="callout callout-warning" role="alert">
  <h4>Warning!</h4>
  <p>Better check yourself, you're <a href="#">not looking too good</a>.</p>
</div>

<div class="callout callout-danger" role="alert">
  <h4>Oh snap!</h4>
  <p><a href="#">Change a few things up</a> and try submitting again.</p>
</div>

Icons

This template supports Glyphicons which is part of Bootstrap, and Font Awesome. You can look for your favorite icons online:

By the way, you can see the list of icons in the rest of this article.

  1. Glyphicons
  2. Font Awesome

Glyphicons

  • glyphicon glyphicon-asterisk
  • glyphicon glyphicon-plus
  • glyphicon glyphicon-euro
  • glyphicon glyphicon-eur
  • glyphicon glyphicon-minus
  • glyphicon glyphicon-cloud
  • glyphicon glyphicon-envelope
  • glyphicon glyphicon-pencil
  • glyphicon glyphicon-glass
  • glyphicon glyphicon-music
  • glyphicon glyphicon-search
  • glyphicon glyphicon-heart
  • glyphicon glyphicon-star
  • glyphicon glyphicon-star-empty
  • glyphicon glyphicon-user
  • glyphicon glyphicon-film
  • glyphicon glyphicon-th-large
  • glyphicon glyphicon-th
  • glyphicon glyphicon-th-list
  • glyphicon glyphicon-ok
  • glyphicon glyphicon-remove
  • glyphicon glyphicon-zoom-in
  • glyphicon glyphicon-zoom-out
  • glyphicon glyphicon-off
  • glyphicon glyphicon-signal
  • glyphicon glyphicon-cog
  • glyphicon glyphicon-trash
  • glyphicon glyphicon-home
  • glyphicon glyphicon-file
  • glyphicon glyphicon-time
  • glyphicon glyphicon-road
  • glyphicon glyphicon-download-alt
  • glyphicon glyphicon-download
  • glyphicon glyphicon-upload
  • glyphicon glyphicon-inbox
  • glyphicon glyphicon-play-circle
  • glyphicon glyphicon-repeat
  • glyphicon glyphicon-refresh
  • glyphicon glyphicon-list-alt
  • glyphicon glyphicon-lock
  • glyphicon glyphicon-flag
  • glyphicon glyphicon-headphones
  • glyphicon glyphicon-volume-off
  • glyphicon glyphicon-volume-down
  • glyphicon glyphicon-volume-up
  • glyphicon glyphicon-qrcode
  • glyphicon glyphicon-barcode
  • glyphicon glyphicon-tag
  • glyphicon glyphicon-tags
  • glyphicon glyphicon-book
  • glyphicon glyphicon-bookmark
  • glyphicon glyphicon-print
  • glyphicon glyphicon-camera
  • glyphicon glyphicon-font
  • glyphicon glyphicon-bold
  • glyphicon glyphicon-italic
  • glyphicon glyphicon-text-height
  • glyphicon glyphicon-text-width
  • glyphicon glyphicon-align-left
  • glyphicon glyphicon-align-center
  • glyphicon glyphicon-align-right
  • glyphicon glyphicon-align-justify
  • glyphicon glyphicon-list
  • glyphicon glyphicon-indent-left
  • glyphicon glyphicon-indent-right
  • glyphicon glyphicon-facetime-video
  • glyphicon glyphicon-picture
  • glyphicon glyphicon-map-marker
  • glyphicon glyphicon-adjust
  • glyphicon glyphicon-tint
  • glyphicon glyphicon-edit
  • glyphicon glyphicon-share
  • glyphicon glyphicon-check
  • glyphicon glyphicon-move
  • glyphicon glyphicon-step-backward
  • glyphicon glyphicon-fast-backward
  • glyphicon glyphicon-backward
  • glyphicon glyphicon-play
  • glyphicon glyphicon-pause
  • glyphicon glyphicon-stop
  • glyphicon glyphicon-forward
  • glyphicon glyphicon-fast-forward
  • glyphicon glyphicon-step-forward
  • glyphicon glyphicon-eject
  • glyphicon glyphicon-chevron-left
  • glyphicon glyphicon-chevron-right
  • glyphicon glyphicon-plus-sign
  • glyphicon glyphicon-minus-sign
  • glyphicon glyphicon-remove-sign
  • glyphicon glyphicon-ok-sign
  • glyphicon glyphicon-question-sign
  • glyphicon glyphicon-info-sign
  • glyphicon glyphicon-screenshot
  • glyphicon glyphicon-remove-circle
  • glyphicon glyphicon-ok-circle
  • glyphicon glyphicon-ban-circle
  • glyphicon glyphicon-arrow-left
  • glyphicon glyphicon-arrow-right
  • glyphicon glyphicon-arrow-up
  • glyphicon glyphicon-arrow-down
  • glyphicon glyphicon-share-alt
  • glyphicon glyphicon-resize-full
  • glyphicon glyphicon-resize-small
  • glyphicon glyphicon-exclamation-sign
  • glyphicon glyphicon-gift
  • glyphicon glyphicon-leaf
  • glyphicon glyphicon-fire
  • glyphicon glyphicon-eye-open
  • glyphicon glyphicon-eye-close
  • glyphicon glyphicon-warning-sign
  • glyphicon glyphicon-plane
  • glyphicon glyphicon-calendar
  • glyphicon glyphicon-random
  • glyphicon glyphicon-comment
  • glyphicon glyphicon-magnet
  • glyphicon glyphicon-chevron-up
  • glyphicon glyphicon-chevron-down
  • glyphicon glyphicon-retweet
  • glyphicon glyphicon-shopping-cart
  • glyphicon glyphicon-folder-close
  • glyphicon glyphicon-folder-open
  • glyphicon glyphicon-resize-vertical
  • glyphicon glyphicon-resize-horizontal
  • glyphicon glyphicon-hdd
  • glyphicon glyphicon-bullhorn
  • glyphicon glyphicon-bell
  • glyphicon glyphicon-certificate
  • glyphicon glyphicon-thumbs-up
  • glyphicon glyphicon-thumbs-down
  • glyphicon glyphicon-hand-right
  • glyphicon glyphicon-hand-left
  • glyphicon glyphicon-hand-up
  • glyphicon glyphicon-hand-down
  • glyphicon glyphicon-circle-arrow-right
  • glyphicon glyphicon-circle-arrow-left
  • glyphicon glyphicon-circle-arrow-up
  • glyphicon glyphicon-circle-arrow-down
  • glyphicon glyphicon-globe
  • glyphicon glyphicon-wrench
  • glyphicon glyphicon-tasks
  • glyphicon glyphicon-filter
  • glyphicon glyphicon-briefcase
  • glyphicon glyphicon-fullscreen
  • glyphicon glyphicon-dashboard
  • glyphicon glyphicon-paperclip
  • glyphicon glyphicon-heart-empty
  • glyphicon glyphicon-link
  • glyphicon glyphicon-phone
  • glyphicon glyphicon-pushpin
  • glyphicon glyphicon-usd
  • glyphicon glyphicon-gbp
  • glyphicon glyphicon-sort
  • glyphicon glyphicon-sort-by-alphabet
  • glyphicon glyphicon-sort-by-alphabet-alt
  • glyphicon glyphicon-sort-by-order
  • glyphicon glyphicon-sort-by-order-alt
  • glyphicon glyphicon-sort-by-attributes
  • glyphicon glyphicon-sort-by-attributes-alt
  • glyphicon glyphicon-unchecked
  • glyphicon glyphicon-expand
  • glyphicon glyphicon-collapse-down
  • glyphicon glyphicon-collapse-up
  • glyphicon glyphicon-log-in
  • glyphicon glyphicon-flash
  • glyphicon glyphicon-log-out
  • glyphicon glyphicon-new-window
  • glyphicon glyphicon-record
  • glyphicon glyphicon-save
  • glyphicon glyphicon-open
  • glyphicon glyphicon-saved
  • glyphicon glyphicon-import
  • glyphicon glyphicon-export
  • glyphicon glyphicon-send
  • glyphicon glyphicon-floppy-disk
  • glyphicon glyphicon-floppy-saved
  • glyphicon glyphicon-floppy-remove
  • glyphicon glyphicon-floppy-save
  • glyphicon glyphicon-floppy-open
  • glyphicon glyphicon-credit-card
  • glyphicon glyphicon-transfer
  • glyphicon glyphicon-cutlery
  • glyphicon glyphicon-header
  • glyphicon glyphicon-compressed
  • glyphicon glyphicon-earphone
  • glyphicon glyphicon-phone-alt
  • glyphicon glyphicon-tower
  • glyphicon glyphicon-stats
  • glyphicon glyphicon-sd-video
  • glyphicon glyphicon-hd-video
  • glyphicon glyphicon-subtitles
  • glyphicon glyphicon-sound-stereo
  • glyphicon glyphicon-sound-dolby
  • glyphicon glyphicon-sound-5-1
  • glyphicon glyphicon-sound-6-1
  • glyphicon glyphicon-sound-7-1
  • glyphicon glyphicon-copyright-mark
  • glyphicon glyphicon-registration-mark
  • glyphicon glyphicon-cloud-download
  • glyphicon glyphicon-cloud-upload
  • glyphicon glyphicon-tree-conifer
  • glyphicon glyphicon-tree-deciduous
  • glyphicon glyphicon-cd
  • glyphicon glyphicon-save-file
  • glyphicon glyphicon-open-file
  • glyphicon glyphicon-level-up
  • glyphicon glyphicon-copy
  • glyphicon glyphicon-paste
  • glyphicon glyphicon-alert
  • glyphicon glyphicon-equalizer
  • glyphicon glyphicon-king
  • glyphicon glyphicon-queen
  • glyphicon glyphicon-pawn
  • glyphicon glyphicon-bishop
  • glyphicon glyphicon-knight
  • glyphicon glyphicon-baby-formula
  • glyphicon glyphicon-tent
  • glyphicon glyphicon-blackboard
  • glyphicon glyphicon-bed
  • glyphicon glyphicon-apple
  • glyphicon glyphicon-erase
  • glyphicon glyphicon-hourglass
  • glyphicon glyphicon-lamp
  • glyphicon glyphicon-duplicate
  • glyphicon glyphicon-piggy-bank
  • glyphicon glyphicon-scissors
  • glyphicon glyphicon-bitcoin
  • glyphicon glyphicon-btc
  • glyphicon glyphicon-xbt
  • glyphicon glyphicon-yen
  • glyphicon glyphicon-jpy
  • glyphicon glyphicon-ruble
  • glyphicon glyphicon-rub
  • glyphicon glyphicon-scale
  • glyphicon glyphicon-ice-lolly
  • glyphicon glyphicon-ice-lolly-tasted
  • glyphicon glyphicon-education
  • glyphicon glyphicon-option-horizontal
  • glyphicon glyphicon-option-vertical
  • glyphicon glyphicon-menu-hamburger
  • glyphicon glyphicon-modal-window
  • glyphicon glyphicon-oil
  • glyphicon glyphicon-grain
  • glyphicon glyphicon-sunglasses
  • glyphicon glyphicon-text-size
  • glyphicon glyphicon-text-color
  • glyphicon glyphicon-text-background
  • glyphicon glyphicon-object-align-top
  • glyphicon glyphicon-object-align-bottom
  • glyphicon glyphicon-object-align-horizontal
  • glyphicon glyphicon-object-align-left
  • glyphicon glyphicon-object-align-vertical
  • glyphicon glyphicon-object-align-right
  • glyphicon glyphicon-triangle-right
  • glyphicon glyphicon-triangle-left
  • glyphicon glyphicon-triangle-bottom
  • glyphicon glyphicon-triangle-top
  • glyphicon glyphicon-console
  • glyphicon glyphicon-superscript
  • glyphicon glyphicon-subscript
  • glyphicon glyphicon-menu-left
  • glyphicon glyphicon-menu-right
  • glyphicon glyphicon-menu-down
  • glyphicon glyphicon-menu-up

Font Awesome

Web Application Icons

adjust
anchor
archive
area-chart
arrows
arrows-h
arrows-v
asterisk
at
automobile (alias)
ban
bank (alias)
bar-chart
bar-chart-o (alias)
barcode
bars
bed
beer
bell
bell-o
bell-slash
bell-slash-o
bicycle
binoculars
birthday-cake
bolt
bomb
book
bookmark
bookmark-o
briefcase
bug
building
building-o
bullhorn
bullseye
bus
cab (alias)
calculator
calendar
calendar-o
camera
camera-retro
car
caret-square-o-down
caret-square-o-left
caret-square-o-right
caret-square-o-up
cart-arrow-down
cart-plus
cc
certificate
check
check-circle
check-circle-o
check-square
check-square-o
child
circle
circle-o
circle-o-notch
circle-thin
clock-o
close (alias)
cloud
cloud-download
cloud-upload
code
code-fork
coffee
cog
cogs
comment
comment-o
comments
comments-o
compass
copyright
credit-card
crop
crosshairs
cube
cubes
cutlery
dashboard (alias)
database
desktop
diamond
dot-circle-o
download
edit (alias)
ellipsis-h
ellipsis-v
envelope
envelope-o
envelope-square
eraser
exchange
exclamation
exclamation-circle
exclamation-triangle
external-link
external-link-square
eye
eye-slash
eyedropper
fax
female
fighter-jet
file-archive-o
file-audio-o
file-code-o
file-excel-o
file-image-o
file-movie-o (alias)
file-pdf-o
file-photo-o (alias)
file-picture-o (alias)
file-powerpoint-o
file-sound-o (alias)
file-video-o
file-word-o
file-zip-o (alias)
film
filter
fire
fire-extinguisher
flag
flag-checkered
flag-o
flash (alias)
flask
folder
folder-o
folder-open
folder-open-o
frown-o
futbol-o
gamepad
gavel
gear (alias)
gears (alias)
genderless (alias)
gift
glass
globe
graduation-cap
group (alias)
hdd-o
headphones
heart
heart-o
heartbeat
history
home
hotel (alias)
image (alias)
inbox
info
info-circle
institution (alias)
key
keyboard-o
language
laptop
leaf
legal (alias)
lemon-o
level-down
level-up
life-bouy (alias)
life-buoy (alias)
life-ring
life-saver (alias)
lightbulb-o
line-chart
location-arrow
lock
magic
magnet
mail-forward (alias)
mail-reply (alias)
mail-reply-all (alias)
male
map-marker
meh-o
microphone
microphone-slash
minus
minus-circle
minus-square
minus-square-o
mobile
mobile-phone (alias)
money
moon-o
mortar-board (alias)
motorcycle
music
navicon (alias)
newspaper-o
paint-brush
paper-plane
paper-plane-o
paw
pencil
pencil-square
pencil-square-o
phone
phone-square
photo (alias)
picture-o
pie-chart
plane
plug
plus
plus-circle
plus-square
plus-square-o
power-off
print
puzzle-piece
qrcode
question
question-circle
quote-left
quote-right
random
recycle
refresh
remove (alias)
reorder (alias)
reply
reply-all
retweet
road
rocket
rss
rss-square
search
search-minus
search-plus
send (alias)
send-o (alias)
server
share
share-alt
share-alt-square
share-square
share-square-o
shield
ship
shopping-cart
sign-in
sign-out
signal
sitemap
sliders
smile-o
soccer-ball-o (alias)
sort
sort-alpha-asc
sort-alpha-desc
sort-amount-asc
sort-amount-desc
sort-asc
sort-desc
sort-down (alias)
sort-numeric-asc
sort-numeric-desc
sort-up (alias)
space-shuttle
spinner
spoon
square
square-o
star
star-half
star-half-empty (alias)
star-half-full (alias)
star-half-o
star-o
street-view
suitcase
sun-o
support (alias)
tablet
tachometer
tag
tags
tasks
taxi
terminal
thumb-tack
thumbs-down
thumbs-o-down
thumbs-o-up
thumbs-up
ticket
times
times-circle
times-circle-o
tint
toggle-down (alias)
toggle-left (alias)
toggle-off
toggle-on
toggle-right (alias)
toggle-up (alias)
trash
trash-o
tree
trophy
truck
tty
umbrella
university
unlock
unlock-alt
unsorted (alias)
upload
user
user-plus
user-secret
user-times
users
video-camera
volume-down
volume-off
volume-up
warning (alias)
wheelchair
wifi
wrench

Transportation Icons

ambulance
automobile (alias)
bicycle
bus
cab (alias)
car
fighter-jet
motorcycle
plane
rocket
ship
space-shuttle
subway
taxi
train
truck
wheelchair

Gender Icons

circle-thin
genderless (alias)
mars
mars-double
mars-stroke
mars-stroke-h
mars-stroke-v
mercury
neuter
transgender
transgender-alt
venus
venus-double
venus-mars

File Type Icons

file
file-archive-o
file-audio-o
file-code-o
file-excel-o
file-image-o
file-movie-o (alias)
file-o
file-pdf-o
file-photo-o (alias)
file-picture-o (alias)
file-powerpoint-o
file-sound-o (alias)
file-text
file-text-o
file-video-o
file-word-o
file-zip-o (alias)

Spinner Icons

circle-o-notch
cog
gear (alias)
refresh
spinner

Form Control Icons

check-square
check-square-o
circle
circle-o
dot-circle-o
minus-square
minus-square-o
plus-square
plus-square-o
square
square-o

Payment Icons

cc-amex
cc-discover
cc-mastercard
cc-paypal
cc-stripe
cc-visa
credit-card
google-wallet
paypal

Chart Icons

area-chart
bar-chart
bar-chart-o (alias)
line-chart
pie-chart

Currency Icons

bitcoin (alias)
btc
cny (alias)
dollar (alias)
eur
euro (alias)
gbp
ils
inr
jpy
krw
money
rmb (alias)
rouble (alias)
rub
ruble (alias)
rupee (alias)
shekel (alias)
sheqel (alias)
try
turkish-lira (alias)
usd
won (alias)
yen (alias)

Text Editor Icons

align-center
align-justify
align-left
align-right
bold
chain (alias)
chain-broken
clipboard
columns
copy (alias)
cut (alias)
dedent (alias)
eraser
file
file-o
file-text
file-text-o
files-o
floppy-o
font
header
indent
italic
link
list
list-alt
list-ol
list-ul
outdent
paperclip
paragraph
paste (alias)
repeat
rotate-left (alias)
rotate-right (alias)
save (alias)
scissors
strikethrough
subscript
superscript
table
text-height
text-width
th
th-large
th-list
underline
undo
unlink (alias)

Directional Icons

angle-double-down
angle-double-left
angle-double-right
angle-double-up
angle-down
angle-left
angle-right
angle-up
arrow-circle-down
arrow-circle-left
arrow-circle-o-down
arrow-circle-o-left
arrow-circle-o-right
arrow-circle-o-up
arrow-circle-right
arrow-circle-up
arrow-down
arrow-left
arrow-right
arrow-up
arrows
arrows-alt
arrows-h
arrows-v
caret-down
caret-left
caret-right
caret-square-o-down
caret-square-o-left
caret-square-o-right
caret-square-o-up
caret-up
chevron-circle-down
chevron-circle-left
chevron-circle-right
chevron-circle-up
chevron-down
chevron-left
chevron-right
chevron-up
hand-o-down
hand-o-left
hand-o-right
hand-o-up
long-arrow-down
long-arrow-left
long-arrow-right
long-arrow-up
toggle-down (alias)
toggle-left (alias)
toggle-right (alias)
toggle-up (alias)

Video Player Icons

arrows-alt
backward
compress
eject
expand
fast-backward
fast-forward
forward
pause
play
play-circle
play-circle-o
step-backward
step-forward
stop
youtube-play

Brand Icons

adn
android
angellist
apple
behance
behance-square
bitbucket
bitbucket-square
bitcoin (alias)
btc
buysellads
cc-amex
cc-discover
cc-mastercard
cc-paypal
cc-stripe
cc-visa
codepen
connectdevelop
css3
dashcube
delicious
deviantart
digg
dribbble
dropbox
drupal
empire
facebook
facebook-f (alias)
facebook-official
facebook-square
flickr
forumbee
foursquare
ge (alias)
git
git-square
github
github-alt
github-square
gittip (alias)
google
google-plus
google-plus-square
google-wallet
gratipay
hacker-news
html5
instagram
ioxhost
joomla
jsfiddle
lastfm
lastfm-square
leanpub
linkedin
linkedin-square
linux
maxcdn
meanpath
medium
openid
pagelines
paypal
pied-piper
pied-piper-alt
pinterest
pinterest-p
pinterest-square
qq
ra (alias)
rebel
reddit
reddit-square
renren
sellsy
share-alt
share-alt-square
shirtsinbulk
simplybuilt
skyatlas
skype
slack
slideshare
soundcloud
spotify
stack-exchange
stack-overflow
steam
steam-square
stumbleupon
stumbleupon-circle
tencent-weibo
trello
tumblr
tumblr-square
twitch
twitter
twitter-square
viacoin
vimeo-square
vine
vk
wechat (alias)
weibo
weixin
whatsapp
windows
wordpress
xing
xing-square
yahoo
yelp
youtube
youtube-play
youtube-square

Medical Icons

ambulance
h-square
heart
heart-o
heartbeat
hospital-o
medkit
plus-square
stethoscope
user-md
wheelchair