Component

Bootstrap components

BUTTONS AND DROPDOWNS


Examples

Base buttons









Button groups


Button groups vertical

Buttons sizes

Buttons colors

Usage

<!-- SQUARE -->
<button class="btn btn-sm btn-default" type="button">Click me</button>
<!-- SQUARE ICON -->
<button class="btn btn-sm btn-default" type="button"><i class="fa fa-long-arrow-right"></i>Click me</button>
<!-- SQUARE ANIMATION -->
<a href="#" class="btn btn-sm btn-default anima-button"><i class="fa fa-long-arrow-right"></i>Animated button</a>
<!-- CIRCLE -->
<a href="#" class="circle-button btn btn-sm">Circle button</a>
<!-- CIRCLE ANIMATION -->
 <a href="#" class="anima-button circle-button btn btn-sm"><i class="fa fa-long-arrow-right"></i>Animated button</a>
<!-- LINK -->
<a class="btn-text text-m" href="#">Text button</a>
<!-- LINK ANIMATION -->
<a class="btn-text anima-button text-m" href="#"><i class="fa fa-angle-double-right"></i>Text button </a>
<!-- EXAMPLE 1 -->
<div class="btn-group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Click me <span class="caret"></span></button>
    <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">Separated link</a></li>
    </ul>
</div>
<!-- EXAMPLE 2 -->
<div class="btn-group">
    <button type="button" class="btn btn-default">Click me</button>
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span></button>
    <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">Separated link</a></li>
    </ul>
</div>
<!-- EXAMPLE 3 - DROPUP -->
<div class="btn-group dropup"> ... </div>
<!-- EXAMPLE 1 -->
<div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Left</button>
    <button type="button" class="btn btn-default">Middle</button>
    <button type="button" class="btn btn-default">Right</button>
</div>
<!-- EXAMPLE 2 -->
<div class="btn-group" role="group">
    <button type="button" class="btn btn-default">1</button>
    <button type="button" class="btn btn-default">2</button>
    <div class="btn-group" role="group">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Dropdown<span class="caret"></span></button>
        <ul class="dropdown-menu">
            <li><a href="#">Dropdown link</a></li>
            <li><a href="#">Dropdown link</a></li>
        </ul>
    </div>
</div>
<!-- EXAMPLE 3 - JUSTIFIED -->
<div class="btn-group btn-group-justified" role="group"> ... </div>
<!-- EXAMPLE 4 - VERTICAL BUTTON GROUPS -->
<div class="btn-group-vertical" role="group">
    <button type="button" class="btn btn-default ">Button</button>
    <button type="button" class="btn btn-default">Button</button>
    <button type="button" class="btn btn-default">Button</button>
    <button type="button" class="btn btn-default">Button</button>
 </div>
<!-- LARGE BUTTON -->
<button class="btn btn-default btn-lg" type="button">Click me</button>
<!-- DEFAULT BUTTON -->
<button class="btn btn-default" type="button">Click me</button>
<!-- SMALL BUTTON -->
<button class="btn btn-default btn-sm" type="button">Click me</button>
<!-- EXTRA SMALL BUTTON -->
<button class="btn btn-default btn-xs" type="button">Click me</button>
<!-- DEFAULT COLOR -->
<button class="btn btn-default" type="button">Click me</button>
<!-- PRIMARY COLOR -->
<button class="btn btn-default btn-primary" type="button">Click me</button>
<!-- SUCCESS COLOR -->
<button class="btn btn-default btn-success" type="button">Click me</button>
<!-- INFO COLOR -->
<button class="btn btn-default btn-info" type="button">Click me</button>
<!-- WARNING COLOR -->
<button class="btn btn-default btn-warning" type="button">Click me</button>
<!-- DANGER COLOR -->
<button class="btn btn-default btn-danger" type="button">Click me</button>

Justified buttons

To justify a button and make it full width add class nav-justified to button code.
Example: <button href="http://www.google.com/" class="btn btn-default nav-justified" type="button"> Go to link </button>.

Link buttons

To convert a button to a link simple replace code <button type="button"> ... </button> with <a href=""> ... </a>.
Example: <a href="http://www.google.com/" class="btn btn-default"> Go to link </a>.


Complete documentation and external resources


INPUT GROUPS


Examples

Example 1
@
Name

Example 2
$ .00
Enter .00
$


Input groups sizes
@
@
@

Checkboxes and radio addons

Usage

<!-- EXAMPLE A -->
<div class="input-group">
    <input type="text" class="form-control" placeholder="Recipient's username">
    <span class="input-group-addon" id="basic-addon2">@</span>
</div>
<!-- EXAMPLE B -->
<div class="input-group">
    <span class="input-group-addon" id="basic-addon1">Name</span>
    <input type="text" class="form-control" placeholder="Username">
</div>
<!-- EXAMPLE C -->
<div class="input-group">
    <span class="input-group-addon" id="basic-addon1"><i class="fa fa-send"></i></span>
    <input type="text" class="form-control" placeholder="Username">
</div>
<!-- EXAMPLE A -->
<div class="input-group">
    <span class="input-group-addon">$</span>
    <input type="text" class="form-control">
    <span class="input-group-addon">.00</span>
</div>
<!-- EXAMPLE B -->
<div class="input-group">
    <span class="input-group-addon">Enter</span>
    <input type="text" class="form-control">
    <span class="input-group-addon">.00</span>
</div>
<!-- EXAMPLE C -->
<div class="input-group">
    <span class="input-group-addon">$</span>
    <input type="text" class="form-control">
    <div class="input-group-btn">
        <button type="button" class="btn btn-default">Action</button>
    </div>
</div>
<!-- EXAMPLE A -->
<div class="input-group">
    <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
        <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
        </ul>
    </div>
    <input type="text" class="form-control">
</div>
<!-- EXAMPLE B -->
<div class="input-group">
    <input type="text" class="form-control">
    <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
        <ul class="dropdown-menu dropdown-menu-right">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
     </div>
</div>
<!-- EXAMPLE C -->
<div class="input-group">
    <div class="input-group-btn">
        <button type="button" class="btn btn-default">Action</button>
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
        <span class="caret"></span>
        <span class="sr-only">Toggle Dropdown</span></button>
        <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
        </ul>
    </div>
    <input type="text" class="form-control">
</div>
<!-- EXAMPLE D -->
<div class="input-group">
    <input type="text" class="form-control">
    <div class="input-group-btn">
        <button type="button" class="btn btn-default">Action</button>
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
        <span class="caret"></span>
        <span class="sr-only">Toggle Dropdown</span></button>
        <ul class="dropdown-menu dropdown-menu-right">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
        </ul>
    </div>
</div>
<!-- EXAMPLE A -->
<div class="input-group input-group-lg">
    <input type="text" class="form-control" placeholder="Recipient's username">
    <span class="input-group-addon" id="basic-addon2">@</span>
</div>
<!-- EXAMPLE B -->
<div class="input-group">
    <input type="text" class="form-control" placeholder="Recipient's username">
    <span class="input-group-addon" id="basic-addon2">@</span>
 </div>
<!-- EXAMPLE C -->
<div class="input-group input-group-sm">
    <input type="text" class="form-control" placeholder="Recipient's username">
    <span class="input-group-addon" id="basic-addon2">@</span>
</div>
<!-- CHECKBOX -->
<div class="input-group">
    <span class="input-group-addon">
       <input type="checkbox">
    </span>
    <input type="text" class="form-control">
</div>
<!-- RADIO -->
<div class="input-group">
    <span class="input-group-addon">
       <input type="radio">
    </span>
    <input type="text" class="form-control">
</div>

Complete documentation and external resources


LABELS


Examples

Info Warning Danger Default Primary Success Coding Keyboard Highlight Deleted

Usage

<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-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<code>Coding</code>
<kbd>Keyboard</kbd>
<mark>Highlight</mark>
<del>Deleted</del>

Complete documentation and external resources


LIST GROUP AND PANELS


Examples

List group and table panel
  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
Panels
Panel heading
Panel content
Panel content
Panel content
Info panels

Alert panel

Allamco laboris nisi ut aliquip ex ea coSed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.

Alert panel

Allamco laboris nisi ut aliquip ex ea coSed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.


Usage

<!-- EXAMPLE 1 -->
<ul class="list-group">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
</ul>
<!-- EXAMPLE 2 -->
<div class="list-group">
    <a href="#" class="list-group-item active">Cras justo odio</a>
    <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
    <a href="#" class="list-group-item">Morbi leo risus</a>
</div>
<!-- EXAMPLE 1 -->
<div class="bs-panel panel-default">
    <div class="panel-heading">Panel heading</div>
    <div class="panel-body">Panel content</div>
</div>
<!-- EXAMPLE 2 -->
<div class="bs-panel panel-default">
    <div class="panel-body">Panel content</div>
    <div class="panel-footer">Panel footer</div>
</div>
<!-- EXAMPLE 3 -->
<div class="bs-panel panel-default">
    <div class="panel-body">Panel content</div>
</div>
<div class="bs-callout">
    <h4>Alert panel</h4>
    <p>
        ...
    </p>
</div>

Complete documentation and external resources


POPOVERS AND TOOLSTIPS


Examples

Toolstips

Popover


Installation

<script src="../scripts/bootstrap/js/bootstrap.popover.min.js"></script>

Usage

<button type="button" class="btn btn-default btn-primary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Left</button>
<!-- EXAMPLE 1 -->
<button type="button" class="btn btn-default btn-primary" data-container="body" data-trigger="focus" data-toggle="popover" data-placement="left" data-content="...">Left</button>
<!-- EXAMPLE 2 -->
<button type="button" class="btn btn-default btn-primary" data-container="body" data-trigger="hover" data-toggle="popover" data-placement="right" title="Popover with title" data-content="...">Right</button>

Complete documentation and external resources


GRID SYSTEM


Examples

.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-7
.col-md-5
.col-md-10
.col-md-2
.col-md-11
.col-..
.col-md-8
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-6
.col-md-6
.col-md-3
.col-md-3
.col-md-3
.col-md-3
.col-md-2
.col-md-2
.col-md-2
.col-md-2
.col-md-2
.col-md-2

Usage

<div class="row">
    <div class="col-md-2">
       ...
    </div>
    <div class="col-md-2">
       ...
    </div>
    <div class="col-md-2">
       ...
    </div>
    <div class="col-md-2">
       ...
    </div>
    <div class="col-md-2">
       ...
    </div>
    <div class="col-md-2">
       ...
    </div>
 </div>
<div class="row">
    <div class="col-md-3">
       ...
    </div>
    <div class="col-md-3">
       ...
    </div>
    <div class="col-md-3">
       ...
    </div>
    <div class="col-md-3">
       ...
    </div>
</div>
<div class="row">
    <div class="col-md-4">
       ...
    </div>
    <div class="col-md-4">
       ...
    </div>
    <div class="col-md-4">
       ...
    </div>
</div>
<div class="row">
    <div class="col-md-6">
       ...
    </div>
    <div class="col-md-6">
       ...
    </div>
</div>
<div class="row">
    <div class="col-md-9">
       ...
    </div>
    <div class="col-md-3">
       ...
    </div>
</div>       
<div class="row">
    <div class="col-md-12">
       ...
    </div>
</div>

Complete documentation and external resources