# General Components general ui components

Alerts

#### Default Alerts

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

#### Dismissable Alerts

Warning! Something went wrong. Please check.

#### Links in alerts

WOW! Well done and everything looks OK. Please check this one as well
Inline Notifications

#### Error!

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Do this Cancel

#### Success!

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Do this Cancel

#### Info!

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Do this Cancel

#### Warning!

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Do this Cancel

Pulsate

#### Pulsate any page elements.

Repeating Pulsate | Repeating Pulsate
| Pulsate me
| Pulsate me

NOTE! Pulsate is supported in Latest Firefox, Chrome, Opera, Safari and Internet Explorer 9 and Internet Explorer 10 only.
Modal Dialogs

#### Click on below buttons to check it out.

Modal Dialog Alert Confirm

#### Modal title

Body goes here...

#### Alert Header

Body goes here...

#### Confirm Header

Body goes here...

Tooltips

Tight pants next level keffiyeh you probably haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel have a terry richardson vinyl chambray. twitter handle freegan cred raw denim single-origin coffee viral.

Popovers

Tight pants next level keffiyeh trigger me on click haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel trigger me on hover terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa.

List Groups

#### Basic

- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros

#### Custom Colors(refer to ui_colors.html for more colors)

- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros

#### Badges

- Cras justo odio 3
- Dapibus ac facilisis in 11
- Morbi leo risus new
- Porta ac consectetur ac 4
- Vestibulum at eros 3

#### Contextual States

- Default
- Success
- Info 3
- Warning 3
- Danger

#### Disabled States

- Item 1
- Item 2
- Item 3 3
- Item 4 3

#### Linked Contextual Items

Default Success Info 3 Warning 3 Danger

#### Custom Content

#### List group item heading

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

#### List group item heading

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

#### List group item heading

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Panels

#### Basic Panels

Panel heading without title
Panel content

### Panel title

Panel content
Panel content

#### Contextual Panels

### Primary Panel

Panel content

### Primary Panel

Panel content

### Success Panel

Panel content

### Info Panel

Panel content

### Warning Panel

Panel content

### Danger Panel

Panel content

#### With Tables

### Panel Title

Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.

# | First Name | Last Name | Username
--- | --- | --- | ---
1 | Mark | Otto | @mdo
2 | Jacob | Thornton | @fat
3 | Larry | the Bird | @twitter

#### With List Groups

### Panel Title

Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.

- Cras justo odio 3
- Dapibus ac facilisis in 11
- Morbi leo risus new
- Porta ac consectetur ac 4
- Vestibulum at eros 3
- Vestibulum at eros

Notes

#### Success! Some Header Goes Here

Duis mollis, est non commodo luctus, nisi erat mattis consectetur purus sit amet porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

#### Info! Some Header Goes Here

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, mattis consectetur purus sit amet eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

#### Danger! Some Header Goes Here

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit mattis consectetur purus sit amet.\ Cras mattis consectetur purus sit amet fermentum.

#### Warning! Some Header Goes Here

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit mattis consectetur purus sit amet. Cras mattis consectetur purus sit amet fermentum.

Progress Bars

#### Cross-browser compatibility

Progress bars use CSS3 transitions and animations to achieve some of their effects. These features are not supported in Internet Explorer 9 and below or older versions of Firefox. Opera 12 does not support animations.

### Basic

40% Complete (success)
20% Complete
60% Complete (warning)
80% Complete

### Striped

40% Complete (success)
20% Complete
60% Complete (warning)
80% Complete (danger)

### Animated

40% Complete (success)
20% Complete
60% Complete (warning)
80% Complete (danger)

### Stacked

35% Complete (success)
20% Complete (warning)
10% Complete (danger)
Labels & Badges

#### Labels & Badges Styles

Class | Labels | Badges | Roundless Badges
--- | --- | --- | ---
Default | Default | 5 | 3
Primary | Primary | 4 | Hot
Info | Info | 6 | New
Success | Success | 1 | 2
Danger | Danger | 3 | 5
Warning | Warning | 12 | 3

#### Labels In Headings

# Example heading default

## Example heading success

### Example heading danger

#### Example heading info

#### Example heading warning

###### Example heading primary

#### Badges in Navs

#### Badges in Inline Dropdowns

#### Badges in Button Dropdowns

Pagination

- 1
- 2
- 3
- 4
- 5
- 6

- 1
- 2
- 3
- 4
- 5
- 6

- 1
- 2
- 3
- 4
- 5
- 6

Pager With Aligned Links

#### Default

Tight pants next level keffiyeh trigger me on click haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown.

- ← Older
- Newer →

#### Optional Disabled State

Tight pants next level keffiyeh trigger me on click haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown.

- ← Older
- Newer →

#### With Styled Buttons & Icons

Tight pants next level keffiyeh trigger me on click haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown.

- Older
- Newer

Dynamic Pagination(jQuery Bootpag)

#### Basic Pagination

Page 1 content here

#### Advance Pagination

Page 1 content here

Wells

#### I am a large well

Tight pants next level keffiyeh trigger me on click haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown.

#### I am a default well

Tight pants next level keffiyeh trigger me on click haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown.

#### I am a small well

Tight pants next level keffiyeh trigger me on click haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown.

Media Objects

Abstract object styles for building various types of components (like blog comments, Tweets, etc) that feature a left or right aligned image alongside textual content.

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

Thumbnails

Extend Bootstrap's grid system with the thumbnail component to easily display grids of images, videos, text, and more.

#### Default

#### Custom Content

### Thumbnail label

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.

Button Button

### Thumbnail label

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.

Button Button