• 12,476
    User registrations
  • 621,873
    Total clicks
  • 562
    New orders
  • $45,360
    General balance
  • 562K+
    Total users
  • 36,290
    Facebook fans
This page contains all UI elements, including bootstrap components and custom elements
Search boxes
Statistic widgets
Charts page →
Tabs
I'm in Section 1.
Howdy, I'm in Section 2.
I'm in Section 1.
Howdy, I'm in Section 2.
I'm in Section 1.
Howdy, I'm in Section 2.
I'm in Section 1.
Howdy, I'm in Section 2.
I'm in Section 1.
Howdy, I'm in Section 2.
I'm in Section 1.
Howdy, I'm in Section 2.
Pagination, pager
Pagination sizes
Large .pagination-large
Default .pagination
Small .pagination-small
Mini .pagination-mini
Left aligned pagination (default)
Centered pagination .pagination-centered
Right aligned pagination .pagination-right
Default pager
Unboxed pager
With disabled button
Navbars and navbar elements
This block is opened by default
class="progress progress-danger"
class="progress progress-slim progress-info"
class="btn btn-info pull-right"
ul class="pager pull-right" right after title
form class="navbar-form pull-right"
And this one is closed by default
For input field use class="navbar-datepicker"
Use class="label label-inverse pull-right" to add label
Use class="badge pull-right" to place badge
Font Awesome, FamFam and Glyphicons
Font Awesome, FamFam and Glyphicons
ul class="nav pull-right"
class="dropdown-toggle navbar-icon" for parent link
class="dropdown-toggle navbar-icon" for parent link
class="dropdown-toggle navbar-icon" for parent link
div class="dropdown-toggle navbar-icon"
ul class="navbar-icons"
div class="pagination pagination-small pull-right" right after title
div class="loading pull-right" with span and loader image inside
Modals and alerts
Pickers
  • -
  • -
  • -
Sliders, progress bars
Wells
Class Description
.well Default well styling
.well-smoke A bit darker background. Usually for nested well usage
.well-white White background
.well-small Smaller padding
.well-large Bigger padding
.well .body Well with padding
<div class="well body"></div>
<div class="well-smoke body"></div>
<div class="well-white body"></div>
<div class="well-small body"></div>
<div class="well-large block"></div>
Well smoke
<div class="well-smoke body"></div>
Well white
<div class="well-white body"></div>
Well small, well white
<div class="well-small body"></div>
Other Bootstrap components

@fat

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

@mdo

Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tattooed cosby sweater food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetic exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.

one

Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in, sustainable delectus consectetur fanny pack iphone.

two

In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.

three

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

Keytar twee blog, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats you probably haven't heard of them consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat before they sold out, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.

Accordion supports all icon versions. Just add necessary class or remove icon code to use text only
Anim pariatur cliche...
Anim pariatur cliche...
Anim pariatur cliche...
Anim pariatur cliche...
Notifications

Popover top

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover bottom

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover right

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover left

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Labels Markup
Default <span class="label">Default</span>
Success <span class="label label-success">Success</span>
Warning <span class="label label-warning">Warning</span>
Important <span class="label label-important">Important</span>
Info <span class="label label-info">Info</span>
Inverse <span class="label label-inverse">Inverse</span>
Badges Markup
1 <span class="badge">1</span>
2 <span class="badge badge-success">2</span>
3 <span class="badge badge-warning">3</span>
4 <span class="badge badge-important">4</span>
5 <span class="badge badge-info">5</span>
6 <span class="badge badge-inverse">6</span>
Warning! Best check yo self, you're not looking too good.
Warning! Best check yo self, you're not looking too good.
Warning! Best check yo self, you're not looking too good.
Warning! Best check yo self, you're not looking too good.
Warning!
Best check yo self, you're not...
Buttons
Class Description
.btn Default light buttons
.btn .btn-primary Blue button
.btn .btn-warning Warning button with orange background
.btn .btn-success Success button with green background
.btn .btn-danger Error or danger button with red background
.btn .btn-info Info button with light blue background
.btn .btn-inverse Inversed button with dark grey background
.btn .btn-link Button as a link, without background
Button sizes
Button groups
Block buttons.btn-block One class, multiple tags
Link