UI Elements

Warning

This product is being rebuilt from scratch. Follow me on Twitter so you can be up-to-date with the new version release date.

Reusable components built to provide alerts, modals, buttons, breadcrumbs, and much more.

General

Modals

Modals are streamlined but flexible, dialog prompts with the minimum required functionality and smart defaults.

For more detailed documentation check Bootstrap Modals Official documentation

PNotify

JavaScript notifications for Bootstrap, jQuery UI, and theWeb Notifications Draft.

For more detailed documentation check PNotify Official website

Tooltips

The tooltip or info tip (hint) is a common graphical user interface element. It is used in conjunction with a cursor, usually a pointer. The user hovers the pointer over an item, without clicking it, and a tooltip may appear—a small "hover box" with information about the item being hovered over.

For more detailed documentation check Bootstrap Tooltips Official documentation

Popovers

Add small overlays of content, like those on the iPad,to any element for housing secondary information.

For more detailed documentation check Bootstrap Popovers Official documentation

Label & Badges

Two new styles has been added to labels and badges: .label-inverse, .label-neutral, .badge-inverse and .badge-neutral.

For more detailed documentation check Bootstrap Label & Badge documentation

Alerts

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages. For more detailed documentation check Bootstrap Alert documentation.

List group

List groups are a flexible and powerful component for displaying not only simple lists of elements, but complex ones with custom content. For more detailed documentation check Bootstrap List group documentation

Breadcrumbs

Indicate the current page's location within a navigational hierarchy.

A new style has been created for breadcrumbs, you need use the class .breadcrumb-arrows

You can choose different colors: .breadcrumb-default, .breadcrumb-primary, .breadcrumb-success, .breadcrumb-info, .breadcrumb-warning, .breadcrumb-danger, .breadcrumb-inverse and .breadcrumb-neutral

For more detailed documentation check Bootstrap Breadcrumbs documentation

Progress bars

Provide up-to-date feedback on the progress of a workflow or action with a simple and flexible progress bars.

For more detailed documentation check Bootstrap Progress bars documentation

Feeds Panel

Activities Feed

Users Feed

Base code (Activities Feed)

<div class="activities-feed">
    <ul class="list-group">
      ...
      <li class="list-group-item">
        <a href="#">
          <div class="label label-warning feed-icon">
            <i class="fa fa-warning"></i>
          </div>
          <span>System overload</span>
          <span class="label label-success">warning</span>
          <span class="feed-time"><em>2 minutes ago</em></span>
        </a>
      </li>
      ...
    </ul>
</div>

Base code (Users Feed)

<div class="users-feed">
    <ul class="list-group">
      ... 
      <li class="list-group-item">
        <a href="#ignore">
          <img class="feed-avatar" src="./assets/img/avatars/user1_55.jpg" alt="John Doe">
          <span>Removing user</span>
          <span class="label label-success">completed</span>
          <span class="feed-time"><em>25 Sept 2013 3:45pm</em></span>
        </a>
      </li>
      ...
    </ul>
</div>

Chat Panel

Base code

<div class="panel panel-default panel-chat">
  <div class="panel-body">
      <ul class="scroll">
          <!-- Message by receiver -->
          <li class="left clearfix">
            <span class="chat-img pull-left">
              <img src="./assets/img/avatars/user1.jpg" alt="User Avatar"/>
            </span>
            <div class="chat-body clearfix">
                <div class="header">
                    <strong class="primary-font">User Name </strong>
                    <small class="pull-right text-muted">
                        <span class="fa fa-clock-o"></span>
                        2 mins ago
                    </small>
                </div>
                <p><!-- Message --></p>
            </div>
          </li>
          <!-- Message by sender -->
          <li class="right clearfix">
            <span class="chat-img pull-right">
              <img src="./assets/img/avatars/user2.jpg" alt="User Avatar"/>
            </span>
            <div id="chat_sender" class="chat-body clearfix">
                <div class="header">
                    <small class=" text-muted">
                      <span class="fa fa-clock-o"></span>
                      2 mins ago
                    </small>
                    <strong class="pull-right primary-font"> User Name </strong>
                </div>
                <p><!-- Message --></p>
            </div>
          </li>
      </ul>
  </div>
  <div class="panel-footer">
      <!-- Composer Box -->
      <div class="input-group">
          <input id="btn-input" type="text" class="form-control input-sm" placeholder="Type your message here..." />
          <span class="input-group-btn">
              <button class="btn btn-success btn-sm" id="btn-chat">
                Send
              </button>
          </span>
      </div>
  </div>
</div>

Buttons

Two new styles has been created for buttons: .btn-inverse and .btn-neutral:

For more detailed documentation check Bootstrap Buttons documentation

Group Buttons

Base code

<div class="btn-mini-group">
    <button type="button" class="btn btn-primary btn-lg">Large button</button>
    <div class="or or-lg"></div>
    <button type="button" class="btn btn-success btn-lg">Large button</button>
</div>

More examples here

Icon Buttons

Base code (icon left)

<div class="btn-icon">
  <a href="#" class="btn btn-neutral" role="button">
    <i class="fa fa-tint fa-lg"></i>
    <div class="title">Light</div>
    <span class="label label-warning">6</span>
  </a>
</div>

Base code (icon right)

<div class="btn-icon">
  <a href="#" class="btn btn-warning" role="button">
    <i class="fa fa-tint fa-lg"></i>
    <div class="title">Orange</div>
    <span class="label label-primary pull-right">26</span>
  </a>
</div>

Social Buttons made in pure CSS based on Bootstrap

More information in the official website

List Buttons

Social Buttons made in pure CSS based on Bootstrap

Base code

<div class="btn-list">
  <a class="btn btn-neutral" href="#">
    <i class="fa fa-link"></i>
    <span>User Profile<br>
    <small>Lorem ipsum dolor</small></span>
  </a>
</div>
<!-- OR -->
<div class="btn-list">
  <a class="btn btn-danger" href="#">
    <i class="fa fa-tasks"></i>
    <span>Daily Tasks</span>
    <ul>
      <li>....</li>
    </ul>
  </a>
</div>

Panels

You can find the official documentation in the Bootstrap Panels documentation

Some improvements have been made to Panels:

Custom header

A new element in the panel heading (.panel-heading) is available:.panel-tools. You can put anything in there.

Panel plugin

A plugin for collapsing and deleting panels have been generated, you can find it in

./assets/js/panels.js

You just need to indicate the panels container

$(function() {
    $('.main').panels();
});

The collapse trigger is defined by data-option="collapse" and the dismiss (delete) trigger by data-dismiss="panel".

<div class="panel panel-default">
    <div class="panel-heading">
      <div class="panel-title">
        <!-- title -->
      </div>
      <!-- BEGIN Plugin Elements -->
      <div class="panel-tools pull-right">
        <div class="icon-tools">
          <!--              -->
          <i class="fa fa-chevron-down" data-option="collapse"></i>
          <!--              -->
          <i class="fa fa-times" data-dismiss="panel"></i>
        </div>
      </div>
      <!-- END Plugin Elements -->
    </div>
    <div class="panel-body">
      <!-- Body -->
    </div>
</div>

Tabs & Accordions

Bootstrap Tabs Documentation here

Bootstrap Accordions Documentation here

New tabs styles

A new tab style has been generated, just use .nav-tabs-advanced. 8 different colors are available: .nav-tabs-default, .nav-tabs-primay, .nav-tabs-success, .nav-tabs-info, .nav-tabs-warning, .nav-tabs-danger, .nav-tabs-inverse and .nav-tabs-neutral

Files Uploaders

Two plugins are available:

DropzoneJS

DropzoneJS is an open source library that provides drag 'n' drop file uploads with image previews. Official Website

jQuery File Upload

File Upload widget with multiple file selection, drag & drop support, progress bars, validation and preview images, audio and video for jQuery. Official Website

WYSIWYG Editors

Three plugins are available:

Bootstrap WYSIWYG5 Editor

It's a javascript plugin that makes it easy to create simple, beautiful wysiwyg editors with the help of wysihtml5 and Bootstrap 3 Official Website

CKEditor

CKEditor is a ready-for-use HTML text editor designed to simplify web content creation. It's a WYSIWYG editor that brings common word processor features directly to your web pages. Official Website

Markdown Editor

Bootstrap-Markdown designed to be easily integrated with your bootstrap project. It exposes useful API that allow you to fully hook-in into the plugin Official Website

Icons Packs

Three icons packs are available:

Font Awesome

Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS. Official Website

Glyphicons - Free Version

Includes 200 glyphs in font format from the Glyphicon Halflings set. Official Website

Glyphicons - Pro Version

GLYPHICONS is a library of precisely prepared monochromatic icons and symbols, created with an emphasis on simplicity and easy orientation. Reselling of this asset is prohibited and the license is non transferable. If you would like to use them as a part of your own (another) product, you have to buy your own license.Official Website

Typography

There are good typography examples in Bootstrap official website, go there.