Funeral Program Templates | Unlimited Edits | Print at Home
1-800-520-0362
support@quickfuneral.com

Progress BarsTwitter Bootstrap Based

Examples and markup

Basic

Default progress bar with a vertical gradient.

  1. <div class="progress">
  2. <div class="bar" style="width: 60%;"></div>
  3. </div>

Striped

Uses a gradient to create a striped effect. Not available in IE7-8.

  1. <div class="progress progress-striped">
  2. <div class="bar" style="width: 20%;"></div>
  3. </div>

Animated

Add .active to .progress-striped to animate the stripes right to left. Not available in all versions of IE.

  1. <div class="progress progress-striped active">
  2. <div class="bar" style="width: 40%;"></div>
  3. </div>

Stacked

Place multiple bars into the same .progress to stack them.

  1. <div class="progress">
  2. <div class="bar bar-success" style="width: 35%;"></div>
  3. <div class="bar bar-warning" style="width: 20%;"></div>
  4. <div class="bar bar-danger" style="width: 10%;"></div>
  5. </div>

Options

Additional colors

Progress bars use some of the same button and alert classes for consistent styles.

  1. <div class="progress progress-info">
  2. <div class="bar" style="width: 20%"></div>
  3. </div>
  4. <div class="progress progress-success">
  5. <div class="bar" style="width: 40%"></div>
  6. </div>
  7. <div class="progress progress-warning">
  8. <div class="bar" style="width: 60%"></div>
  9. </div>
  10. <div class="progress progress-danger">
  11. <div class="bar" style="width: 80%"></div>
  12. </div>

Striped bars

Similar to the solid colors, we have varied striped progress bars.

  1. <div class="progress progress-info progress-striped">
  2. <div class="bar" style="width: 20%"></div>
  3. </div>
  4. <div class="progress progress-success progress-striped">
  5. <div class="bar" style="width: 40%"></div>
  6. </div>
  7. <div class="progress progress-warning progress-striped">
  8. <div class="bar" style="width: 60%"></div>
  9. </div>
  10. <div class="progress progress-danger progress-striped">
  11. <div class="bar" style="width: 80%"></div>
  12. </div>

Browser support

Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE7-9 or older versions of Firefox.

Versions earlier than Internet Explorer 10 and Opera 12 do not support animations.

×

Customize an existing template (100% customizable, Unlimited Content) or create your very own using our Drag & Drop easy Card designer studio.

funeral template customize

create funeral program

You can also order for free Card Making Service

free funeral program

Keeping your loved one memory alive with   by QuickFuneral.com