John Doe
Wrap any text and an optional dismiss button in .alert and one of the four contextual classes (e.g., .alert-success) for basic alert messages. To create custom alert box add .alert-white rounded classes.
Wrap any text and an optional dismiss button in .alert and one of the four contextual classes (e.g., .alert-success) for basic alert messages.
Info !
Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.
Error !
Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.
Success !
Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.
Warning !
Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.
Message Bar
Slide On Top Expanding LoaderGrowl Like Notification
Scale Jelly Slide In GenieAttached Message Notification
Flip Bouncy FlipOther Notification Style
Thumb Slider Box Spinner Loading Circle Corner ExpandSlide 1
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
Slide 2
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
Slide 3
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
Sizing
Fancy larger or smaller pagination? Add .pagination-lg or .pagination-sm for additional sizes.
Simple Example
Advanced Example
Advanced Example 2
Add .progress-striped to create a striped effect. Not available in IE8.
Add .active to .progress-striped to animate the stripes right to left. Not available in IE9 and below.
Add any of the below mentioned modifier classes to change the appearance of a label.
Default Primary Success Info Warning Danger
Easily highlight new or unread items by adding a <span class="badge"> to links, Bootstrap navs, and more.
5 10 15 20 30 35
Adapts to active Button Group
Built-in styles are included for placing badges in active states in pill navigations or in Button Group.
Default progress bar code example.
With label
Remove the .sr-only class from within the progress bar to show a visible percentage. For low percentages, consider adding a min-width to ensure the label's text is fully visible.
Stacked Progress Bars
Place multiple bars into the same .progress to stack them.
Switch Size
Switch Colors
Disabled / Read only Switch
Label Text
Icon Label Text
Hello, world!
This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.