Buttons, popover and other

Bootstrap components documentation

Buttons and components

Square buttons


Square icons button


Circle buttons


Circle buttons


Link buttons


Animated buttons

Click me Buy now Get free quote

Button sizes









Inputs

Example 1

@
Name

Example 2

$ .00
Enter .00
$

Example 3


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-sm">Action</button>
    </div>
</div>
<!-- EXAMPLE A -->
<div class="input-group">
    <div class="input-group-btn">
        <button type="button" class="btn btn-sm 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-sm 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-sm">Action</button>
        <button type="button" class="btn btn-sm 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-sm">Action</button>
        <button type="button" class="btn btn-sm 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 groups and panels

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 tooltips

Toolstips


Popover



Installation

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

Usage

<button type="button" class="btn btn-sm btn-primary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Left</button>
<!-- EXAMPLE 1 -->
<button type="button" class="btn btn-sm 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-sm 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