User interface & buttons

Pagination

Multicon-page pagination

The default pagination component is flexible and works in a number of variations.

Links have 3 different states. Use class .active for current page and .disabled for unclickable links.

You can also align pagination to the left (default), center .pagination-centered and right .pagination-right.

Alerts

Simple alerts for user notification. Comes in two variants and several colors.

iOS devices require an href="#" for the dismissal of alerts. Be sure to include it and the data attribute for anchor close icons. Alternatively, you may use a <button> element with the data attribute. When using <button>, you must include type="button" or your forms may not submit.

Warning!

Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

Oh snap! Change a few things up and try submitting again.
Well done! You successfully read this important alert message.
Heads up! This alert needs your attention, but it's not super important.

Progress bars

Progress bars use some of the same button and alert classes for consistent styles. Similar to the solid colors, we have varied striped progress bars.

Progress bars use CSS3 transitions, so if you dynamically adjust the width via javascript, it will smoothly resize. If you use the .active class, your .progress-striped progress bars will animate the stripes left to right.

89%
89%

Inline labels

Inline labels for anything you need. Get creative!

Default Success Warning Important Info Inverse

Badges

Smaller and more rounded younger brother.

1 2 4 6 8 10

Wells

Use the well as a simple effect on an element to give it an inset effect.

Look, I'm in a well!

Popovers

Hover over the button to trigger the popover.

Hover for popover

Modal

Not much to say here - basic modals. Click on the button to trigger modal window.

Launch Modal

Accordion

Just add data-toggle="collapse" and a data-target to element to automatically assign control of a collapsible element. The data-target attribute accepts a css selector to apply the collapse to. Be sure to add the class collapse to the collapsible element. If you'd like it to default open, add the additional class in.

Collapsible Group Item #1
Anim cliche reprehenderit, enim eiusmod high life terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Collapsible Group Item #2
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Collapsible Group Item #3
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Huge accordion

Just add huge class to the accordion element to automatically set width fullscreen. You will love it on your smartphone.

Invoices
Anim cliche reprehenderit, enim eiusmod high life terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Orders 10
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Shipments
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Default Bootstrap buttons

Button Class Description
btn Standard gray button with gradient
btn btn-primary Provides extra visual weight and identifies the primary action in a set of buttons
btn btn-info Used as an alternative to the default styles
btn btn-success Indicates a successful or positive action
btn btn-warning Indicates caution should be taken with this action
btn btn-danger Indicates a dangerous or potentially negative action
btn btn-inverse Alternate dark gray button, not tied to a semantic action or use

Wuxia buttons

Button Class Description
btn btn-wuxia Standard gray button with gradient
btn btn-wuxia btn-primary Provides extra visual weight and identifies the primary action in a set of buttons
btn btn-wuxia btn-info Used as an alternative to the default styles
btn btn-wuxia btn-success Indicates a successful or positive action
btn btn-wuxia btn-warning Indicates caution should be taken with this action
btn btn-wuxia btn-danger Indicates a dangerous or potentially negative action
btn btn-wuxia btn-inverse Alternate dark gray button, not tied to a semantic action or use

Flat wuxia buttons

Button Class Description
btn btn-flat Standard gray button with gradient
btn btn-wuxia btn-flat Provides extra visual weight and identifies the primary action in a set of buttons
btn btn-flat btn-info Used as an alternative to the default styles
btn btn-flat btn-success Indicates a successful or positive action
btn btn-flat btn-warning Indicates caution should be taken with this action
btn btn-flat btn-danger Indicates a dangerous or potentially negative action
btn btn-flat btn-inverse Alternate dark gray button, not tied to a semantic action or use

More fun with buttons

One class for multiple tags

Use the .btn class on an <a>, <button>, or <input> element.

Link

3 different sizes

Fancy larger or smaller buttons? Add .btn-large, .btn-small, or .btn-mini, for two additional sizes.

Disabled state

For disabled buttons, add the .disabled class to links and the disabled, attribute for <button> elements.

Disabled link Disabled link Disabled link

Button groups

Button toolbars

Checkbox and radio toolbars