Main Menu

Progressbar

Lorem ipsum dolor sit amet

Bars with outside value

Add .progress-classic as parent div class and add .overflow-visible to .progress & .progress-bar and also add .progress-value to span in .progress-bar to show progress value outside of bar.

Web Design
60%
Graphics Design
70%
Data Security
65%
Art & Craft
68%
Mathamatics
80%

<!-- Bars with outside value -->
<div class="progress-classic">
    <div class="progress-label fs-14 fw-semibold mb-1">Web Design</div>
    <div class="progress overflow-visible mb-4" style="height: 4px;">
        <div class="progress-bar bg-red overflow-visible" role="progressbar" aria-label="Red example" style="width: 60%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"><span class="progress-value fw-semibold text-red">60%</span></div>
    </div>
</div>

<div class="progress-classic">
    <div class="progress-label fs-14 fw-semibold mb-1">Graphics Design</div>
    <div class="progress overflow-visible mb-4" style="height: 4px;">
        <div class="progress-bar bg-purple overflow-visible" role="progressbar" aria-label="Purple example" style="width: 70%" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"><span class="progress-value fw-semibold text-primary">70%</span></div>
    </div>
</div>

<div class="progress-classic">
    <div class="progress-label fs-14 fw-semibold mb-1">Data Security</div>
    <div class="progress overflow-visible mb-4" style="height: 4px;">
        <div class="progress-bar bg-green overflow-visible" role="progressbar" aria-label="Green example" style="width: 65%" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100"><span class="progress-value fw-semibold text-green">65%</span></div>
    </div>
</div>

<div class="progress-classic">
    <div class="progress-label fs-14 fw-semibold mb-1">Art & Craft</div>
    <div class="progress overflow-visible mb-4" style="height: 4px;">
        <div class="progress-bar bg-orange overflow-visible" role="progressbar" aria-label="Orange example" style="width: 68%" aria-valuenow="68" aria-valuemin="0" aria-valuemax="100"><span class="progress-value fw-semibold text-warning">68%</span></div>
    </div>
</div>

<div class="progress-classic">
    <div class="progress-label fs-14 fw-semibold mb-1">Mathamatics</div>
    <div class="progress overflow-visible" style="height: 4px;">
        <div class="progress-bar bg-dark overflow-visible" role="progressbar" aria-label="Dark example" style="width: 80%" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"><span class="progress-value fw-semibold text-dark">80%</span></div>
    </div>
</div>

Bars with Ratting

Add .progress-ratting as parent div class.

5
60
4
70
3
65
2
68
1
80 

<!-- Bars with Ratting -->
<div class="progress-ratting d-flex align-items-center mb-4">
    <div class="progress-label fw-semibold text-nowrap">5 <i class="bi bi-star-fill"></i></div>
    <div class="progress w-100 mx-3" style="height: 4px;">
        <div class="progress-bar bg-red" role="progressbar" aria-label="Red example" style="width: 60%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
    <span class="progress-value text-gray-800 fw-semibold">60</span>
</div>

<div class="progress-ratting d-flex align-items-center mb-4">
    <div class="progress-label fw-semibold text-nowrap">4 <i class="bi bi-star-fill"></i></div>
    <div class="progress w-100 mx-3" style="height: 4px;">
        <div class="progress-bar bg-purple" role="progressbar" aria-label="Red example" style="width: 70%" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
    <span class="progress-value text-gray-800 fw-semibold">70</span>
</div>

<div class="progress-ratting d-flex align-items-center mb-4">
    <div class="progress-label fw-semibold text-nowrap">3 <i class="bi bi-star-fill"></i></div>
    <div class="progress w-100 mx-3" style="height: 4px;">
        <div class="progress-bar bg-green" role="progressbar" aria-label="Red example" style="width: 65%" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
    <span class="progress-value text-gray-800 fw-semibold">65%</span>
</div>

<div class="progress-ratting d-flex align-items-center mb-4">
    <div class="progress-label fw-semibold text-nowrap">2 <i class="bi bi-star-fill"></i></div>
    <div class="progress w-100 mx-3" style="height: 4px;">
        <div class="progress-bar bg-orange" role="progressbar" aria-label="Red example" style="width: 68%" aria-valuenow="68" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
    <span class="progress-value text-gray-800 fw-semibold">68</span>
</div>

<div class="progress-ratting d-flex align-items-center">
    <div class="progress-label fw-semibold text-nowrap">1 <i class="bi bi-star-fill"></i></div>
    <div class="progress w-100 mx-3" style="height: 4px;">
        <div class="progress-bar bg-dark" role="progressbar" aria-label="Red example" style="width: 80%" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
    <span class="progress-value text-gray-800 fw-semibold">80</span>
</div>

Bars with Ratting

Add .progress-ratting-classic as parent div class.

4.4

Course Ratting

60%
70%
65%
68%
80% 

<!-- Bars with Ratting -->
<div class="row align-items-center">
    <div class="col-lg-3 d-flex justify-content-end">
        <div class="ratting_box text-center">
            <h1 class="ratting_average text-primary mb-2">4.4</h1>
            <div class="ratting_icons text-orange"><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i></div>
            <p class="ratting_sub_title text-dark fw-semibold mb-0">Course Ratting</p>
        </div>
    </div>

    <div class="col-lg-9">
        <div class="progress-ratting-classic d-flex align-items-center mb-2">
            <div class="progress w-100" style="height: 8px;">
                <div class="progress-bar bg-gray-300" role="progressbar" aria-label="Red example" style="width: 60%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
            </div>
            <div class="progress-label fw-semibold text-nowrap text-orange mx-3"><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i></div>
            <span class="progress-value text-primary fw-semibold">60%</span>
        </div>
        
        <div class="progress-ratting-classic d-flex align-items-center mb-2">
            <div class="progress w-100" style="height: 8px;">
                <div class="progress-bar bg-gray-300" role="progressbar" aria-label="Red example" style="width: 70%" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>
            </div>
            <div class="progress-label fw-semibold text-nowrap text-orange mx-3"><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star"></i></div>
            <span class="progress-value text-primary fw-semibold">70%</span>
        </div>

        <div class="progress-ratting-classic d-flex align-items-center mb-2">
            <div class="progress w-100" style="height: 8px;">
                <div class="progress-bar bg-gray-300" role="progressbar" aria-label="Red example" style="width: 65%" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100"></div>
            </div>
            <div class="progress-label fw-semibold text-nowrap text-orange mx-3"><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star"></i><i class="bi bi-star"></i></div>
            <span class="progress-value text-primary fw-semibold">65%</span>
        </div>

        <div class="progress-ratting-classic d-flex align-items-center mb-2">
            <div class="progress w-100" style="height: 8px;">
                <div class="progress-bar bg-gray-300" role="progressbar" aria-label="Red example" style="width: 68%" aria-valuenow="68" aria-valuemin="0" aria-valuemax="100"></div>
            </div>
            <div class="progress-label fw-semibold text-nowrap text-orange mx-3"><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star"></i><i class="bi bi-star"></i><i class="bi bi-star"></i></div>
            <span class="progress-value text-primary fw-semibold">68%</span>
        </div>

        <div class="progress-ratting-classic d-flex align-items-center">
            <div class="progress w-100" style="height: 8px;">
                <div class="progress-bar bg-gray-300" role="progressbar" aria-label="Red example" style="width: 80%" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
            </div>
            <div class="progress-label fw-semibold text-nowrap text-orange mx-3"><i class="bi bi-star-fill"></i><i class="bi bi-star"></i><i class="bi bi-star"></i><i class="bi bi-star"></i><i class="bi bi-star"></i></div>
            <span class="progress-value text-primary fw-semibold">80%</span>
        </div>
    </div>
</div>