BootKit home · Manual home

PROGRESS BARS

Adding various styles to control the height of the progress bar.


Available classes

Notes:
- box shadow on the inner progress bar is disabled. Should you need it comment out LINE 1-3 in bootkit/progress-bars.less.
- radius is turned off with bk-rd-off; this depends on personal taste and is not obligated.

Examples

xxs

60% Complete

xs

60% Complete

sm

60% Complete

md

60% Complete

xl

60% Complete

xxl

60% Complete

xxxl

60% Complete
<div class="progress bk-rd-off bk-progress-xxs bk-mg-t-15 bk-mg-off-b">
    <div class="progress-bar bk-bg-primary" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
        <span class="sr-only">60% Complete</span>
    </div>
</div>

<div class="progress bk-rd-off bk-progress-xs bk-mg-t-15 bk-mg-off-b">
    <div class="progress-bar bk-bg-primary" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
        <span class="sr-only">60% Complete</span>
    </div>
</div>

<div class="progress bk-rd-off bk-progress-sm bk-mg-t-15 bk-mg-off-b">
    <div class="progress-bar bk-bg-primary" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
        <span class="sr-only">60% Complete</span>
    </div>
</div>

<div class="progress bk-rd-off bk-progress-md bk-mg-t-15 bk-mg-off-b">
    <div class="progress-bar bk-bg-primary" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
        <span class="sr-only">60% Complete</span>
    </div>
</div>

<div class="progress bk-rd-off bk-progress-xl bk-mg-t-15 bk-mg-off-b">
    <div class="progress-bar bk-bg-primary" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
        <span class="sr-only">60% Complete</span>
    </div>
</div>

<div class="progress bk-rd-off bk-progress-xxl bk-mg-t-15 bk-mg-off-b">
    <div class="progress-bar bk-bg-primary" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
        <span class="sr-only">60% Complete</span>
    </div>
</div>

<div class="progress bk-rd-off bk-progress-xxxl bk-mg-t-15 bk-mg-off-b">
    <div class="progress-bar bk-bg-primary" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
        <span class="sr-only">60% Complete</span>
    </div>
</div>