User interface & buttons
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
.
Pager
Pager links also use the general .disabled
class from the pagination.
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.
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.
Inline labels
Inline labels for anything you need. Get creative!
Default Success Warning Important Info InverseBadges
Smaller and more rounded younger brother.
1 2 4 6 8 10Wells
Use the well as a simple effect on an element to give it an inset effect.
Popovers
Hover over the button to trigger the popover.
Hover for popoverModal
Not much to say here - basic modals. Click on the button to trigger modal window.
Launch ModalAccordion
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
.
Huge accordion
Just add huge
class to the accordion element to automatically set width fullscreen. You will love it on your smartphone.
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.
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
Button dropdowns