# UI Elements > General Elements

- ##### My Income $47,171

  1300, 1877, 2500, 2577, 2000, 2100, 3000, 2700, 3631, 2471, 2700, 3631, 2471

- ##### Site Traffic 45%

  110,150,300,130,400,240,220,310,220,300, 270, 210

- ##### Site Orders 2447

  110,150,300,130,400,240,220,310,220,300, 270, 210

Warning Your monthly traffic is reaching limit.
Success The page has been added.
Info! You have 198 unread messages.
Error! The daily cronjob has failed.

## Standard Progress Bars

All progress bars contain a base class of `.progress` . Control the size of the progress bar with `.progress-xs` , `.progress-sm` , `.progress-lg` or leave as is for the default size.

### Transitional Progress Bars

JS required This nifty animated progress bars run on CSS combined with javascript

You will simply need to add in the value `aria-valuetransitiongoal="25"` after the .progress-bar class

For right alignment add class `.progress .right`

The default is left aligned.

### Transitional Progress Bars continued...

Add an overlapping div to progress-bar with the base css of `.progress .vertical`

Add an overlapping div to progress-bar with the base css of `.progress .vertical .bottom`

Add an overlapping div to progress-bar with the base css of `.progress .vertical .wide-bar`

Add an overlapping div to progress-bar with the base css of `.bottom .wide-bar`

### Default Progress Bars

Micro progress bar `.progress-micro` with `.progress-bar-primary`

Extra small progress bar `.progress-xs` with `.bg-color-blue`

Small progress bar `.progress-sm` with `.bg-color-greenLight`

Default progress bar with `.bg-color-redLight`

Large progress bars `.progress-lg` with `.bg-color-blueLight`

### Stripped Progress Bars

Sriped Progress bars made with CSS3 gradients, by adding the `.progress-striped` class to the base class

Info! Please be aware that this will not work in archaic browsers such as IE9 80% Complete

Activate and animate a progress bar by adding the class `.progress-striped .active`

Dark progress bar with class `.bg-color-darken`

### Stacking Progress Bars

Stack one progressbar on top of another by including all in one `div.progress` 35,20,10,35

## Customized Tabs

## Default Tabs with border

Tabs inside `.jarviswidget .well` (Bordered Tabs)

I have six locks on my door all in a row. When I go out, I lock every other one. I figure no matter how long somebody stands there picking the locks, they are always locking three.

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee.

Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony.

Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table.

## Tabs left

Switch Navs / Pills

Dear Math, please grow up and solve your own problems, I'm tired of solving them for you.

They say that love is more important than money, but have you ever tried to pay your bills with a hug?

Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony.

Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table.

The broccoli says 'I look like a small tree', the mushroom says 'I look like an umbrella', the walnut says 'I look like a brain', and the banana says 'Can we please change the subject?'

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee.

Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table.

Three monkeys escaped from the zoo, one was caught watching TV, the other playing hockey, and the third one was caught reading this quote!

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee.

Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table.

## My Data

Tabs inside well and pulled right `.tabs-pull-right` (Bordered Tabs)

My therapist told me the way to achieve true inner peace is to finish what I start. So far I’ve finished two bags of M&Ms and a chocolate cake. I feel better already.

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee.

Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony.

Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table.

## Tabs right

TEAM WORK: Having somebody else you can blame it on.
HARDWARE: The part of a computer you can kick when there are software problems.
IMPATIENT: Somebody who is waiting in a hurry.

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.

Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.

## Header Tabs Right

When I stare at the sky, I see you. When I stare out into the ocean, I see you. When I'm looking at the moon, I see you. Geez! Would you move aside, you're constantly getting in my way!

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee.

Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table.

I love everyone! I love to be around some people, I love to stay away from others, and some I'd just love to punch right in the face!

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee.

Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table.

## Accordions

#### Collapsible Group Item #1

Column name | Column name | Column name | Column name
--- | --- | --- | ---
Row 1 | Row 2 | Row 3 | Row 4
Row 1 | Row 2 | Row 3 | Row 4
Row 1 | Row 2 | Row 3 | Row 4

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

## Inside a widget

Add Padding

#### Collapsible Group Item #1

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.

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

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

## Default Nav Bars

## Labels and Badges

Did you know you can add more than just the basic colors to customize your badge? Learn more about color options modifiers on the Typography page!

Add any of the below mentioned modifier classes to change the appearance of a label.

Classes | Labels
--- | ---
`.label-default` | Default
`.label-primary` | Primary
`.label-success` | Success
`.label-info` | Info
`.label-warning` | Warning
`.label-danger` | Danger

Add any of the below mentioned modifier classes to change the appearance of a badge.

Classes | Badges
--- | ---
No modifiers | 42
`.bg-color-darken` | 1
`.bg-color-greenLight` | 22
`.bg-color-blueLight` | 30
`.bg-color-orange` | 412
`.bg-color-red` | 999

## Block Messages

×

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

#### Success!

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.
×

#### Info!

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.
×

#### Error!

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.

Action Button

## Carousel Slide / Fade

### Carousel `.slide`

Default sliding carousel with base class of `.carousel .slide`

#### Title 1

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Read more

#### Title 2

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Read more

#### A very long thumbnail title here to fill the space

### Carousel `.fade`

To make the carasoul fade, you can use the class `.carousel .fade`

#### Title 1

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Read more

#### Title 2

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Read more

#### A very long thumbnail title here to fill the space

## Alerts and Notifications

### Bootstrap Modal

##### Static Example

A rendered modal with header, body, and set of actions in the footer.

#### Modal title

One fine body…

##### Live Demo

Toggle a modal via JavaScript by clicking the button below. It will slide down and fade in from the top of the page.

Launch remote modal

### Options

Name | type | default | description
--- | --- | --- | ---
backdrop | boolean or the string `'static'` | true | Includes a modal-backdrop element. Alternatively, specify `static` for a backdrop which doesn't close the modal on click.
keyboard | boolean | true | Closes the modal when escape key is pressed
show | boolean | true | Shows the modal when initialized.
remote | path | false | If a remote URL is provided, content will be loaded via jQuery's `load` method and injected into the root of the modal element. If you're using the data-api, you may alternatively use the `href` attribute to specify the remote source. An example of this is shown below:
The traditional bootstrap modal will work a bit different in the SmartAdmin AJAX version: `<a data-target="#modal" data-toggle="modal" href="remote.html"> ... </a>`

### Smart Notifications with sound

##### Big box (Static Example)

Clutter free dynamic alert box, easy to configure and setup!

Sound Enabled

##### Live Demo

INFO! Messages are tabbale and does not overpopulate the user screen. Sounds can also be disabled if not needed

- Example 1
- Example 2
- Example 3
- Example 4

##### Small box alert

Easily customize the alerts to any colors of your choice, and add any icons from the theme library with animation!

##### Extra Small Box

Go even tinier with smaller attention messages!

### Smart Alert with sound

##### With Callback and Buttons (Dynamic Example)

- Callback ()
- Many Buttons

##### With Input and Select

- With Input
- With Select

##### Log me in example

- Login me in

## Tooltips and Popovers

### Tooltips

Tip your users with a small tooltip. Nifty helpful information can be disaplayed using this very simple and yet effictive component. Display pure HTML Content, Images and Icons

- Big Tip
- has Icon
- also Image

- Tooltip Left
- Tooltip Top
- Tooltip Bottom
- Tooltip Right

### Popovers

Popovers are a cool way to express compressed information to the user, neatly and quickly. You can generate all kinds of content within the popover component. Including Forms, Tabs, Images and even Google map!

- On Hover
- Active Content
- File Access

- Popover Left
- Popover Up
- Popover Down
- Popover Right

## Containers, Media and Pagination

### Jumbotron Gets your user attention!

# Hello, world!

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

Learn more

### Wells Notice the well sizes

Large well
`.well .well-lg`
Default well
`.well`
Small well with light background
`.well .well-sm .well-light`

##### Well with background

`.bg-color-darken`

##### Well with background

`.bg-color-teal`

##### Well with background

`.bg-color-pinkDark`

Learn more about other colors that you can use for .well by going to typography page

### Media

- #### Media heading

  Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

  #### Nested media heading

  Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

  #### Nested media heading

  Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

  #### Nested media heading

  Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

- #### Media heading

  Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

### Pagination two different styles

- 1
- 2
- 3
- 4
- 5

- 1
- 2
- 3
- 4
- 5

- 1
- 2
- 3
- 4
- 5

- 1
- 2
- 3
- 4
- 5

- 1
- 2
- 3
- 4
- 5

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

- ← Older
- Newer →