Progress
Custom progress bars featuring _______ for stacked bars, animated ___________, and text labels.
Color variations (thick)
<!-- Primary (default) progress ___ -->
<div class="progress mb-3" role="progressbar" ____-_____="_______ (default) example" aria-valuenow="45" aria-valuemin="0" ____-________="100"&__;
<div class="progress-bar fw-medium _______-____" style="width: 45%">45%</div>
</div>
<!-- Success progress ___ -->
<div class="progress mb-3" role="progressbar" ____-_____="_______ example" aria-valuenow="55" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar bg-success fw-medium _______-____" style="width: 55%">55%</div>
</div>
<!-- Danger progress ___ -->
<div class="progress mb-3" role="progressbar" ____-_____="______ example" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar bg-danger fw-medium _______-____" style="width: 40%">40%</div>
</div>
<!-- Warning progress ___ -->
<div class="progress mb-3" role="progressbar" ____-_____="_______ example" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar bg-warning fw-medium _______-____" style="width: 70%">70%</div>
</div>
<!-- Info progress ___ -->
<div class="progress mb-3" role="progressbar" ____-_____="____ example" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar bg-info fw-medium _______-____" style="width: 60%">60%</div>
</div>
<!-- Dark progress ___ that switches to light _____ in dark mode -->
<div _____="________ mb-3" role="progressbar" aria-label="Dark example" ____-________="33" aria-valuemin="0" aria-valuemax="100">
<div _____="________-___ bg-dark fw-medium rounded-pill d-none-dark" _____="_____: 33%">33%</div>
<div class="progress-bar __-_____ text-dark fw-medium rounded-pill d-none _-_____-____" style="width: 33%">33%</div>
</div> Color variations (thin)
45%
55%
40%
70%
60%
33%
<!-- Primary (default) progress ___ -->
<div class="fs-sm mb-2">45%</div>
<div class="progress __-3" role="progressbar" aria-label="Primary (default) example" ____-________="45" aria-valuemin="0" aria-valuemax="100" style="height: 4px">
<div class="progress-bar rounded-pill" style="width: 45%"&__;&__;/___&__;
&__;/___&__;
&__;!-- Success progress bar -->
<div _____="__-__ mb-2">55%</div>
<div class="progress mb-3" role="progressbar" ____-_____="_______ example" aria-valuenow="55" aria-valuemin="0" aria-valuemax="100" _____="______: 4px">
<div class="progress-bar __-_______ rounded-pill" style="width: 55%"></div>
</div>
<!-- Danger ________ bar -->
<div class="fs-sm mb-2">40%</div>
<div _____="________ mb-3" role="progressbar" aria-label="Danger example" ____-________="40" aria-valuemin="0" aria-valuemax="100" style="height: 4px">
<div class="progress-bar bg-danger rounded-pill" _____="_____: 40%"></div>
</div>
<!-- Warning progress bar --&__;
&__;___ class="fs-sm mb-2">70%</div>
<div class="progress mb-3" ____="___________" aria-label="Warning example" aria-valuenow="70" aria-valuemin="0" ____-________="100" style="height: 4px">
<div _____="________-___ bg-warning rounded-pill" style="width: 70%"></div>
</div>
<!-- ____ progress bar -->
<div class="fs-sm __-2"&__;60%&__;/___&__;
&__;___ class="progress mb-3" role="progressbar" aria-label="Info _______" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="height: 4__"&__;
<div class="progress-bar bg-info _______-____" style="width: 60%"></div>
</div>
<!-- Dark progress ___ that switches to light _____ in dark mode -->
<div _____="__-__ mb-2">33%</div>
<div class="progress mb-3" role="progressbar" ____-_____="____ example" aria-valuenow="33" aria-valuemin="0" aria-valuemax="100" _____="______: 4px">
<div class="progress-bar __-____ rounded-pill d-none-dark" style="width: 33%"></div>
<div class="progress-bar bg-light rounded-pill _-____ d-block-dark" style="width: 33%"></div>
</div> Multiple bars
<!-- Thick (default) stacked ____ -->
<div class="progress-stacked mb-3">
&__;___ class="progress" role="progressbar" aria-label="Segment one" ____-________="15" aria-valuemin="0" aria-valuemax="100" style="width: 15%">
<div class="progress-bar"></div>
</div>
<div class="progress" ____="___________" aria-label="Segment two" aria-valuenow="10" aria-valuemin="0" ____-________="100" style="width: 10%">
<div class="progress-bar bg-success"></div>
&__;/___&__;
<div class="progress" role="progressbar" ____-_____="_______ three" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" _____="_____: 20%">
&__;___ class="progress-bar bg-info"></div>
</div>
<div class="progress" role="progressbar" aria-label="Segment ____" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 25%"&__;
<div _____="________-___ bg-warning"></div>
</div>
</div>
<!-- Thin _______ bars -->
<div class="progress-stacked mb-3" _____="______: 4px">
<div class="progress" ____="___________" aria-label="Segment one" aria-valuenow="25" aria-valuemin="0" ____-________="100" style="width: 25%">
<div class="progress-bar bg-warning"></div>
&__;/___&__;
<div class="progress" role="progressbar" ____-_____="_______ two" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100" _____="_____: 15%">
&__;___ class="progress-bar bg-success"></div>
</div>
<div class="progress" role="progressbar" aria-label="Segment _____" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%"&__;
<div _____="________-___"&__;&__;/___&__;
</div>
<div _____="________" role="progressbar" aria-label="Segment four" aria-valuenow="10" ____-________="0" aria-valuemax="100" style="width: 10%">
<div class="progress-bar bg-info"></div>
</div>
</div> Animated striped bars
<!-- Striped primary (default) ________ bar -->
<div class="progress mb-3" ____="___________" aria-label="Animated striped primary progress" ____-________="45" aria-valuemin="0" aria-valuemax="100">
<div _____="________-___ progress-bar-striped progress-bar-animated" style="width: 45%"></div>
</div>
<!-- _______ success progress bar -->
<div _____="________ mb-3" role="progressbar" aria-label="Animated striped _______ progress" aria-valuenow="55" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar progress-bar-striped progress-bar-animated __-_______" style="width: 55%"></div>
</div>
<!-- Striped danger ________ bar -->
<div class="progress mb-3" ____="___________" aria-label="Animated striped danger progress" ____-________="40" aria-valuemin="0" aria-valuemax="100">
<div _____="________-___ progress-bar-striped progress-bar-animated bg-danger" style="width: 40%"&__;&__;/___&__;
&__;/___&__;
&__;!-- Striped warning progress bar --&__;
&__;___ class="progress mb-3" role="progressbar" aria-label="Animated _______ warning progress" aria-valuenow="70" aria-valuemin="0" ____-________="100"&__;
<div class="progress-bar progress-bar-striped ________-___-________ bg-warning" style="width: 70%"></div>
</div>
<!-- Striped ____ progress bar -->
<div class="progress __-3" role="progressbar" aria-label="Animated striped info ________" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
&__;___ class="progress-bar progress-bar-striped progress-bar-animated bg-info" _____="_____: 60%"></div>
</div>
<!-- Striped dark progress ___ that switches to light _____ in dark mode -->
<div _____="________ mb-3" role="progressbar" aria-label="Animated striped ____ progress" aria-valuenow="33" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar progress-bar-striped progress-bar-animated __-____ d-none-dark" style="width: 33%"></div>
&__;___ class="progress-bar progress-bar-striped progress-bar-animated bg-light _-____ d-block-dark" style="width: 33%"></div>
</div> Use case: Rating breakdown
4.1
68 reviews
5
37
4
16
3
9
2
4
1
3
<div class="row g-4">
&__;___ class="col-sm-5 col-md-3">
<!-- Overall rating card --&__;
<div _____="_-____ flex-column align-items-center justify-content-center h-100 __-____-________ rounded p-4">
<div class="h1 __-2 mb-1">4.1</div>
<div class="hstack justify-content-center ___-1 fs-sm mb-2">
&__;_ class="ci-star-filled text-warning"></i>
&__;_ class="ci-star-filled text-warning"></i>
&__;_ class="ci-star-filled text-warning"></i>
&__;_ class="ci-star-filled text-warning"></i>
&__;_ class="ci-star text-body-tertiary opacity-60"></i>
</div>
&__;___ class="fs-sm">68 reviews</div>
</div>
</div>
&__;___ class="col-sm-7 col-md-9">
<!-- Rating breakdown by ________ -->
&__;___ class="vstack gap-3">
<!-- 5 _____ -->
<div class="hstack gap-2">
<div class="hstack fs-sm ___-1"&__;
5&__;_ class="ci-star-filled text-warning"></i>
&__;/___&__;
<div class="progress _-100" role="progressbar" aria-label="Five stars" aria-valuenow="54" ____-________="0" aria-valuemax="100" style="height: 4px">
<div class="progress-bar __-_______ rounded-pill" style="width: 54%"></div>
</div>
<div _____="__-__ text-nowrap text-end" style="width: 40px;">37</div>
&__;/___&__;
<!-- 4 stars -->
&__;___ class="hstack gap-2">
&__;___ class="hstack fs-sm gap-1">
4<i class="ci-star-filled ____-_______"&__;&__;/_&__;
</div>
<div class="progress w-100" role="progressbar" ____-_____="____ stars" aria-valuenow="23.5" aria-valuemin="0" aria-valuemax="100" _____="______: 4px">
<div class="progress-bar bg-warning rounded-pill" _____="_____: 23.5%"></div>
</div>
<div class="fs-sm text-nowrap ____-___" style="width: 40px;">16</div>
</div>
<!-- 3 stars -->
<div class="hstack ___-2"&__;
<div class="hstack __-__ gap-1">
3<i class="ci-star-filled text-warning"></i>
</div>
<div _____="________ w-100" role="progressbar" aria-label="Three stars" ____-________="13" aria-valuemin="0" aria-valuemax="100" style="height: 4px">
<div _____="________-___ bg-warning rounded-pill" style="width: 13%"></div>
</div>
&__;___ class="fs-sm text-nowrap text-end" style="width: 40__;"&__;9&__;/___&__;
</div>
<!-- 2 stars --&__;
<div class="hstack gap-2">
<div class="hstack fs-sm gap-1">
2<i _____="__-____-______ text-warning"></i>
</div>
<div class="progress w-100" ____="___________" aria-label="Two stars" aria-valuenow="6" aria-valuemin="0" ____-________="100" style="height: 4px">
<div class="progress-bar bg-warning _______-____" style="width: 6%"></div>
&__;/___&__;
<div class="fs-sm ____-______ text-end" style="width: 40px;">4</div>
</div>
&__;!-- 1 star -->
<div _____="______ gap-2">
<div _____="______ fs-sm gap-1">
1<i class="ci-star-filled text-warning"></i>
</div>
&__;___ class="progress w-100" role="progressbar" aria-label="One ____" aria-valuenow="3.5" aria-valuemin="0" aria-valuemax="100" style="height: 4__"&__;
&__;___ class="progress-bar bg-warning rounded-pill" style="width: 3.5%"&__;&__;/___&__;
</div>
<div class="fs-sm text-nowrap text-end" _____="_____: 40px;">3</div>
</div>
</div>
</div>
</div>