# UI Elements

## Accordions

Accordions can be colored with multiple colors!
Red
Vero nam
Molestiae incidunt porro ad occaecati maxime sint dolor non error qui nesciunt sunt qui quisquam reiciendis omnis ea iure dolores qui et.
Sit nemo ducimus laborum
Molestiae incidunt porro ad occaecati maxime sint dolor non error qui nesciunt sunt qui quisquam reiciendis omnis ea iure dolores qui et.
Dicta cumque perspiciatis.
Molestiae incidunt porro ad occaecati maxime sint dolor non error qui nesciunt sunt qui quisquam reiciendis omnis ea iure dolores qui et.
Blue
Vero nam
Molestiae incidunt porro ad occaecati maxime sint dolor non error qui nesciunt sunt qui quisquam reiciendis omnis ea iure dolores qui et.
Sit nemo ducimus laborum
Molestiae incidunt porro ad occaecati maxime sint dolor non error qui nesciunt sunt qui quisquam reiciendis omnis ea iure dolores qui et.
Dicta cumque perspiciatis.
Molestiae incidunt porro ad occaecati maxime sint dolor non error qui nesciunt sunt qui quisquam reiciendis omnis ea iure dolores qui et.
Green
Vero nam
Molestiae incidunt porro ad occaecati maxime sint dolor non error qui nesciunt sunt qui quisquam reiciendis omnis ea iure dolores qui et.
Sit nemo ducimus laborum
Molestiae incidunt porro ad occaecati maxime sint dolor non error qui nesciunt sunt qui quisquam reiciendis omnis ea iure dolores qui et.
Dicta cumque perspiciatis.
Molestiae incidunt porro ad occaecati maxime sint dolor non error qui nesciunt sunt qui quisquam reiciendis omnis ea iure dolores qui et.

## Tabs

Tabs can be aligned to the top, right, left and bottom sides. There are responsive tabs too!
Responsive tabs
Try resizing window to see responsive tabs.

I'm in Section 1.

I'm in Section 2.

I'm in Section 3.

I'm in Section 4.

I'm in Section 5.

I'm in Section 6.

I'm in Section 7.

I'm in Section 8.

I'm in Section 9.

I'm in Section 10.

I'm in Section 11.

I'm in Section 12.

I'm in Section 13.

I'm in Section 14.

I'm in Section 15.

I'm in Section 16.

I'm in Section 17.

I'm in Section 18.

I'm in Section 19.

I'm in Section 20.

Tabs on top and bottom

I'm in Section 1.

Howdy, I'm in Section 2.

What up girl, this is Section 3.

I'm in Section 1.

Howdy, I'm in Section 2.

What up girl, this is Section 3.

Centered tabs

I'm in Section 1.

Howdy, I'm in Section 2.

Simple tabs

I'm in Section 1.

Howdy, I'm in Section 2.

Tabs on left and right

I'm in Section 1.

Howdy, I'm in Section 2.

What up girl, this is Section 3.

I'm in Section 1.

Howdy, I'm in Section 2.

What up girl, this is Section 3.

## Attention

Some features that may increase attention of user.
Modals

### Modal header

One fine body…

Alert Launch big modal Launch modal with form

### Modal Heading

#### Text in a modal

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem.

#### Overflowing text to show optional scrollbar

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

### Form in modal

Full name

Street
Description for street field
City

Company
Tooltips
Top
Right
Bottom
Left
Popovers
Top
Right
Bottom
Left
Notifications
Classic
Waits for close

## Other stuff

Autocomplete
AJAX loaders

Dynamic timeago
May 16, 2013 21:35
May 16, 2013 21:35
May 16, 2013 21:35
Buttons toggle

Sliders
88 77 55 33 40 45 70
Snap to increments
Range slider

Drag & Drop nestable list

1. Item 1
2. Item 2
3. Item 3
4. Item 4

Carousel

‹ ›

Responsive navbar

Paginations

- «
- 1
- 2
- 3
- 4
- 5
- »

- «
- 1
- 2
- 3
- 4
- 5
- »

- «
- 1
- 2
- 3
- 4
- 5
- »

- «
- 1
- 2
- 3
- 4
- 5
- »

Pagers

- Previous
- Next

- Older
- Newer

- Older
- Newer

Labels
Default Success Important Warning Info Inverse
Badges
Default Success Important Warning Info Inverse

Alerts
× Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mi nunc, rutrum quis tincidunt ac
×

#### Info

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mi nunc, rutrum quis tincidunt ac
× Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mi nunc, rutrum quis tincidunt ac
×

#### Error

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mi nunc, rutrum quis tincidunt ac
× Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mi nunc, rutrum quis tincidunt ac
×

#### Success

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mi nunc, rutrum quis tincidunt ac
× Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mi nunc, rutrum quis tincidunt ac
×

#### Warning

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mi nunc, rutrum quis tincidunt ac

Progress bars
60%
10%
5%
20%
10%
5%
20%