Plan / Extra Features

Tables

Header with Color

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

Bordered with Color

# First Name Last Name Username
1 Mark Otto @mdo
Mark Otto @TwBootstrap
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Add class .header-primary to your table.
Standard bootstrap colors are supported too, like .header-danger , .header-success , etc.

Add class .bordered-primary to your table.
Standard bootstrap colors are supported too, like .bordered-danger , .bordered-success , etc.

Form Controls

Icons on inputs

Toggles

Dropdown Select

Add class .input-icon to any .input-group

.toggle.on : activates the toggle
.toggle.toggle-square : make toggle square
.toggle.toggle-color : replace color with any bootstrap standard (primary, danger, info, etc)

Markup

  <div class="toggle">
    <em class="fa fa-circle fa-fw"></em>
    <label class="toggle-on">
      SI
      <input type="radio" value="" name="toggle">
    </label>
    <label class="toggle-off">
       NO
      <input type="radio" value="" name="toggle">
    </label>
  </div>

Create a select and add attribute data-toggle="dropdown-select"

Buttons

With icons

Social

Turnable

Transparents

Include an icon and add class .btn-icon to a .btn to create a buttons with the same padding for icon alignment

Append the following classes to a .btn for social buttons 

.btn-facebook
.btn-twitter
.btn-google
.btn-icon

Append the following classes to a default .btn to turn it into another color on hover 

.btn-turn-primary
.btn-turn-danger
.btn-turn-warning
.btn-turn-info
.btn-turn-success
.btn-turn-inverse

Add class .btn-transparent to any .btn to make the bakcground transparent

Navs Stacked

Stacked & Spaced

Stacked & Labeled

Pills with Icons

Stacked Tabs with Toggles

Add class .nav-spaced to any .nav-stacked

Add a span inside the a and add to it the classes .label.pull-right

Markup Example

...
<a href="#">
  Inbox
  <span class="label pull-right">
    120
  </span>
</a>
...

Add an em with any .fa fa-* class inside the a and add to it class .pull-right

Markup Example

...
<a href="#">
  Profile
  <em class="fa fa-angle-right pull-right"></em>
</a>
...

Include the Toggle markup insde the a tag in a .nav-stacked list and the toggles will be automatically right aligned

Radial Progress Bars


100%

75%

50%

25%

10%

90%

Markup

<div class="progress-radial progress-10 ">
    <div class="overlay">
        <p>10%</p>
    </div>
</div>

Usage

Add class .progress-radial to a div container
Insde add another div with class overlay and set the text to show in the center.
Use class .progress-X to set the percentage progress. Default is 100%.

Important Due to the advance usage of stripped gradient this element works only in modern browsers. IE9 and below shows a circle or square at 100%.

Flush Rows


Add class .flush to any .row to remove padding and margins .

HTML5 Video by Video.JS


Add a video tag with classes video-js vjs-flat-skin to invoke video.js with a flat skin.
Optionally include the file responsive.video.js to make your videos responsive for any device.