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 data-transitiongoal="25" after the .progress-bar class

For right alignment add class .progress .right

25%

50%

75%

100%

The default is left aligned.

25%

50%

75%

100%

Transitional Progress Bars continued...

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

25%
50%
75%
100%

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

25%
50%
75%
100%

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

25%
50%
75%
100%

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

25%
50%
75%
100%

Default Progress Bars

Micro progress bar .progress-micro with .bg-blue

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

Small progress bar .progress-sm with .bg-green-light

Default progress bar with .bg-red-light

Large progress bar .progress-lg with .bg-blue-light

Stripped Progress Bars

Sriped Progress bars made with CSS3 gradients, by adding the .progress-bar-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-bar-striped .progress-bar-animated

Dark progress bar with class .bg-darken

Stacking Progress Bars

35,20,10,35

Stack one progressbar on top of another by including all in one div.progress

Customized Tabs

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.

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.

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?

Bottom Tabs
Top Tabs label

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?'

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

Tabs inside well and pulled right .nav-tabs-right (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.

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.

Bottom Tabs right
Top Tabs right label

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!

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!

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

Collapsible Group Item #1

Collapsible Group Item #2

Collapsible Group Item #3

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-darken`	1
`.bg-green-light`	22
`.bg-blue-light`	30
`.bg-orange`	412
`.bg-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

First slide label

Nulla vitae elit libero, a pharetra augue mollis interdum.

Second slide label

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Third slide label

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

Alerts and Notifications

Bootstrap Modal

Static Example

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

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.

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:
`<a data-toggle="modal" href="remote.html" data-target="#modal"> Click me </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

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)

With Input and Select

Log me in example

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

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!

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.

It uses utility classes for typography and spacing to space content out within the larger container.

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-darken

Well with background

.bg-teal

Well with background

.bg-pink-dark

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