# User interface & buttons

- Interface elements
- Buttons
- Bootstrap Docs

## 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`.

- «
- 10
- ...
- 20
- »

- 1
- 2
- 3
- 4
- 5

- 1
- 2
- 3
- 4

### Pager

Pager links also use the general `.disabled` class from the pagination.

- Previous
- Next

- Older
- Newer

## 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

### Modal header

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae enim ac ligula eleifend commodo id quis risus. Donec consequat lorem et metus facilisis vitae dapibus felis fermentum. Aenean imperdiet nibh vitae sem condimentum pharetra. Mauris molestie molestie faucibus. Aenean sit amet sem orci, at adipiscing dolor. Fusce feugiat odio vitae erat commodo sed accumsan ante sollicitudin. Integer mollis, tellus vel feugiat varius, risus quam lacinia erat, eu ultricies urna dolor ac metus. Mauris vestibulum euismod lectus, vitae vehicula nisl ullamcorper sit amet. In ac consectetur purus. Integer orci ipsum, sollicitudin non rutrum id, adipiscing eu augue. Nulla eget lorem elit. Curabitur vehicula porttitor suscipit.

## 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

### Button dropdowns