Update!

MAR 31 Switch Id to Class for thumbnails

Soon

New functionalities in progress!

Progress Bar


Featuring:

Cool animation without Javascript on:
  • Basic progress bars
  • Contextual progress bars
  • Striped progress bars
  • Animated progress bars
  • Also Stacked progress bars!
Try !

Use

Basic

<div class="progress">
        
  <div class="progress-bar " style="width: 25%;">
  	//Primary style
  	<div class="progress-bar-overlay-primary" >< /div>
    
  </div >
</div >

Animated

<div class="progress">
        
  <div class="progress-bar progress-striped" style="width: 50%;">
  	//For a striped/animated/warning progress bar
  	<div class="progress-bar-overlay-warning active">< /div>
    
  </div >
</div >

Contextual

<div class="progress">
        
  <div class="progress-bar"  style="width: 75%;">
  	//Success style
  	<div class="progress-bar-overlay-success" >< /div>
    
  </div >
</div >

Stacked

<div class="progress">
    
    		<div class="progress-bar progress-striped" style="width: 35%;"><div class="progress-bar-overlay-primary"></div></div>
  		<div class="progress-bar" style="width: 35%"><div class="progress-bar-overlay-danger"></div></div>
  		<div class="progress-bar progress-striped" style="width: 30%"><div class="progress-bar-overlay-info active"></div></div>
       
 </div>
    

Overlay


Panels

6 styles for the 6 Bootstrap's panels:

Default Primary Success Warning Danger Info

4 displays settings

Top to bottom | class: .panel-'style-desiring'-overlay-down Bottom to top | class: .panel-'style-desiring'-overlay-up Left to right | class: .panel-'style-desiring'-overlay-left Right to left | class: .panel-'style-desiring'-overlay-right

Jumbotron

4 displays settings

Top to bottom | class: .jumbotron-overlay-down Bottom to top | class: .jumbotron-overlay-up Left to right | class: .jumbotron-overlay-left Right to left | class: .jumbotron-overlay-right

List Groups

4 displays settings

Top to bottom | class: .jumbotron-overlay-down Bottom to top | class: .jumbotron-overlay-up Left to right | class: .jumbotron-overlay-left Right to left | class: .jumbotron-overlay-right

Example

Overlay Top to Bottom

Learn More

Default Overlay

Example

Overlay Bottom to Top

Learn More

Default Overlay

Example

Overlay Left to Right

Learn More

Default Overlay

Example

Overlay Right to Left

Learn More

Default Overlay


Example

Overlay Top to Bottom

Learn More

Default Overlay

Example

Overlay Bottom to Top

Learn More

Default Overlay

Example

Overlay Left to Right

Learn More

Default Overlay

Example

Overlay Right to Left

Learn More

Default Overlay


Example

Overlay Top to Bottom

Learn More

Default Overlay

Example

Overlay Bottom to Top

Learn More

Default Overlay

Example

Overlay Left to Right

Learn More

Default Overlay

Example

Overlay Right to Left

Learn More

Default Overlay


Example

Overlay Top to Bottom

Learn More

Default Overlay

Example

Overlay Bottom to Top

Learn More

Default Overlay

Example

Overlay Left to Right

Learn More

Default Overlay

Example

Overlay Right to Left

Learn More

Default Overlay


Example

Overlay Top to Bottom

Learn More

Default Overlay

Example

Overlay Bottom to Top

Learn More

Default Overlay

Example

Overlay Left to Right

Learn More

Default Overlay

Example

Overlay Right to Left

Learn More

Default Overlay


Example

Overlay Top to Bottom

Learn More

Default Overlay

Example

Overlay Bottom to Top

Learn More

Default Overlay

Example

Overlay Left to Right

Learn More

Default Overlay

Example

Overlay Right to Left

Learn More

Default Overlay


Jumbotron overlays


Bottom To Top

.jumbotron-overlay-up

Top To Bottom

.jumbotron-overlay-down

Left To Right

.jumbotron-overlay-left

Right To Left

.jumbotron-overlay-right


List groups overlays


  • Cras justo odio

    .list-group-item-overlay-up

  • Cras justo odio

    .list-group-item-overlay-down

  • Cras justo odio

    .list-group-item-overlay-left

  • Cras justo odio

    .list-group-item-overlay-right


Caption


4 caption's styles

Top to Bottom (down in Overlay Bootstrap) Bottom to top (up in Overlay Bootstrap) -Left to right (left in Overlay Bootstrap) Right to left (right in Overlay Bootstrap) New!Half-down | half-up

Caption Up (.caption-up)


Thumbnail label

Some sample text.

Button Button

Thumbnail label

Some sample text.

Button Button

Thumbnail label

Some sample text.

Button Button


Caption Down (.caption-down)


Thumbnail label

Some sample text.

Button Button

Thumbnail label

Some sample text.

Button Button

Thumbnail label

Some sample text.

Button Button


Caption left (.caption-left)


Thumbnail label

Some sample text.

Button Button

Thumbnail label

Some sample text.

Button Button

Thumbnail label

Some sample text.

Button Button


Caption right (.caption-right)


Thumbnail label

Some sample text.

Button Button

Thumbnail label

Some sample text.

Button Button

Thumbnail label

Some sample text.

Button Button


Caption half up, Caption half down (.caption-half-up, .caption-half-down)


Thumbnail label

Some sample text.

Thumbnail label

Some sample text.

Thumbnail label

Some sample text.


How to use Overlay Bootstrap?


Overlay

In your panel body, add a new div with the name which contains the style and the animation desiring.

Example:

A top to bottom danger's style overlay

<div class="panel-body">
Your text
<div class="panel-danger-overlay-down">
Your Overlay!
</div>
</div>

Caption

In your panel body, add a new div with the name which contains the style and the animation desiring.

Example:

For a bottom to top caption

<div class="thumbnail">
<img src="..." alt="image" />
For a bottom to top caption
<div class="caption caption-up">
<h3> Thumbnail label</h3>
<a href="#" class="btn btn-primary" role="button">
Button
</a>
</div>
</div>
For caption-half-down and caption-half-up
<div class="thumbnail"
<img src="..." />
<div class="caption caption-half-down">
Overlay Down
</div>
<div class="caption caption-half-up">
Overlay Up
</div>
</div>