Basic Progress

A basic progress in all different colors.

Source Code

<div class="progress mg-b-20">
  <div class="progress-bar bg-success wd-35p" role="progressbar" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Class Reference

Class	Value
class="progress-bar bg-[value]"	primary | success | warning | danger | info | teal | indigo | purple | orange | pink

Striped Progress

A striped progress in all different colors.

Source Code

<div class="progress mg-b-20">
  <div class="progress-bar progress-bar-striped wd-35p"
  role="progressbar" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Progress Sizes

A basic progress in different sizes.

Size Super Extra Small Size Extra Small Size Small Size Normal Size Large

Source Code

<div class="progress mg-b-20">
  <div class="progress-bar progress-bar-lg wd-35p"
  role="progressbar" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Class Reference

Class	Value
class="progress-bar ht-2"	A super extra small size of progress using the .ht-2 class.
class="progress-bar progress-bar-xs"	An extra small size of progress.
class="progress-bar progress-bar-sm"	An small size of progress.
class="progress-bar progress-bar-lg"	An large size of progress.

Progress Labels

A basic progress with labels centered.

Source Code

<div class="progress mg-b-20">
  <div class="progress-bar progress-bar-lg wd-35p"
  role="progressbar" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100">35%</div>
</div>