General Components bootstrap alerts, notes, tooltips, progress bars, labels, badges, paginations and more
Default Alerts
Dismissable Alerts
Links in alerts
Error!
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.
Success!
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.
Info!
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.
Pulsate any page elements.
Repeating Pulsate |
Repeating Pulsate
|
Pulsate me
|
|
Pulsate me
|
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.
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.
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
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.
Basic Panels
Panel title
Contextual Panels
Primary Panel
Primary Panel
Success Panel
Info Panel
Warning Panel
Danger Panel
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 |
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
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.
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
Striped
Animated
Stacked
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
Default
Optional Disabled State
With Styled Buttons & Icons
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.
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.
-
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.