Buttons, popover and other

Bootstrap components documentation

  1. Home
  2. Components
  3. Bootstrap

Buttons and components

Square buttons

Square icons button

Circle buttons

Click me Buy now Get free quote Contact us now

Circle buttons

Click me Buy now Get free quote Contact us now

Link buttons

Click me Buy now Get free quote Contact us now

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

Documentation

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

Documentation

List groups and panels

List group and table panel

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
Cras justo odio Dapibus ac facilisis in Morbi leo risus

Panels

Panel heading
Panel content
Panel content
Panel footer
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

Panels documentation

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

Documentation