Short Codes
Headings
h1. Bootstrap heading Semibold 36px
h2. Bootstrap heading Semibold 30px
h3. Bootstrap heading Semibold 24px
h4. Bootstrap heading Semibold 18px
h5. Bootstrap heading Semibold 14px
h6. Bootstrap heading Semibold 12px
Progress Bars
Info with progress-bar-info class.
Success with progress-bar-success class.
Warning with progress-bar-warning class.
Danger with progress-bar-danger class.
Inverse with progress-bar-inverse class.
Inverse with progress-bar-inverse class.
35% Complete (success)
20% Complete (warning)
10% Complete (danger)
Alerts
Well done! You successfully read this important alert message.
Heads up! This alert needs your attention, but it's not super important.
Warning! Best check yo self, you're not looking too good.
Oh snap! Change a few things up and try submitting again.
Badges
Add modifier classes to change the appearance of a badge.
Classes
Badges
No modifiers
42
.badge-primary1
.badge-success22
.badge-info30
.badge-warning412
.badge-danger999
Easily highlight new or unread items with the .badge class
Wells
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic
Unordered List
Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum at eros
Ordered List
Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum at eros
Forms
@
@example.com
$
.00
@
@
@
Default styles
For basic stylinglight padding and only horizontal add the base class .table to any <table>.
#
First Name
Last Name
Username
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry
the Bird
@twitter
Add any of the following classes to the .table base class.
Adds zebra-striping to any table row within the <tbody> via the :nth-child CSS selector (not available in IE7-8).
#
First Name
Last Name
Username
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry
the Bird
@twitter
Add borders and rounded corners to the table.
#
First Name
Last Name
Username
1
Mark
Otto
@mdo
Mark
Otto
@getbootstrap
2
Jacob
Thornton
@fat
3
Larry the Bird
@twitter
Enable a hover state on table rows within a <tbody>.
#
First Name
Last Name
Username
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry the Bird
@twitter