Bootstrap Elements

All Bootstrap elements we skinned it.

Tables

Default Table

Panel heading
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<div class="panel panel-default"> <!-- Default panel contents --> <div class="panel-heading">Panel heading</div> <!-- Table --> <table class="table"> ... </table> </div>

Striped Table

Panel heading
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<div class="panel panel-default"> <!-- Default panel contents --> <div class="panel-heading">Panel heading</div> <!-- Table --> <table class="table table-striped"> ... </table> </div>

Striped Table

Panel heading
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<div class="panel panel-default"> <!-- Default panel contents --> <div class="panel-heading">Panel heading</div> <!-- Table --> <table class="table table-bordered"> ... </table> </div>

Buttons

<button class="btn">Button</button>

Primary Button

<button class="btn primary">Primary Button</button>

Secoundry Primary Button

<button class="btn secoundry">Button</button>

Icon Button

<button class="btn"> <i class="glyphicon glyphicon-pencil"></i> </button>

Basic Button

<button class="btn basic">Button</button>

Active Button

<button class="btn active">Button</button>

Disabled Button

<button class="btn disabled">Button</button>

Button Sizes

<button class="btn btn-lg">Large</button> <button class="btn btn-sm">Small</button>

Colored Buttons

<button class="btn btn-danger">Danger</button> <button class="btn btn-warning">Warning</button> <button class="btn btn-success">success</button>

Button Groups

<div class="btn-group" role="group" aria-label="..."> <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>
<div class="btn-toolbar" role="toolbar" aria-label="..."> <div class="btn-group" role="group" aria-label="...">...</div> <div class="btn-group" role="group" aria-label="...">...</div> <div class="btn-group" role="group" aria-label="...">...</div> </div>
<!-- Split button --> <div class="btn-group"> <button type="button" class="btn btn-success">Action</button> <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <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>
<div class="btn-group dropup"> <button type="button" class="btn btn-success">Dropup</button> <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span> </button> <ul class="dropdown-menu"> <!-- Dropdown menu links --> <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>

Forms

inline form

<form class="form-inline"> <input type="text" class="form-control" placeholder="Email"> <input type="password" class="form-control" placeholder="Password"> <div class="checkbox"> <label> <input type="checkbox">Remember me</label> </div> <button type="submit" class="btn btn-default">Sign in</button> </form>

Horizontal form

<form class="form-horizontal"> <div class="form-group"> <label for="inputEmail" class="col-lg-2 control-label">Email</label> <div class="col-lg-10"> <input type="text" class="form-control" id="inputEmail" placeholder="Email"> </div> </div> <div class="form-group"> <label for="inputPassword" class="col-lg-2 control-label">Password </label> <div class="col-lg-10"> <input type="password" class="form-control" id="inputPassword" placeholder="Password"> </div> </div> <div class="form-group"> <div class="col-lg-offset-2 col-lg-10"> <div class="checkbox"> <label> <input type="checkbox">Remember me</label> </div> </div> </div> <div class="form-group"> <div class="col-lg-offset-2 col-lg-10"> <button type="submit" class="btn btn-default">Sign in</button> </div> </div> </form>

Form Controls

Inputs


Checkbox


Radio

Select

Multiple Select

Prepend / Append

@
.00
$ .00

Buttons

Checkboxes and radio

Pagination

<ul class="pagination pagination-lg"> <li> <a href="#">«</a> </li> <li class="active"> <a href="#">1</a> </li> <li> <a href="#">2</a> </li> <li> <a href="#">3</a> </li> <li class="disabled"> <a href="#">»</a> </li> </ul> <ul class="pagination"> <li> <a href="#">«</a> </li> <li class="active"> <a href="#">1</a> </li> <li> <a href="#">2</a> </li> <li> <a href="#">3</a> </li> <li class="disabled"> <a href="#">»</a> </li> </ul> <ul class="pagination pagination-sm"> <li> <a href="#">«</a> </li> <li class="active"> <a href="#">1</a> </li> <li> <a href="#">2</a> </li> <li> <a href="#">3</a> </li> <li class="disabled"> <a href="#">»</a> </li> </ul>

Thumbnails

<a href="#" class="thumbnail"> <img src="...." alt="...."> </a>

Thumbnail with caption

Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Action Action

Carousel