Progress Bar Style 1

75%
                
                        
    <div class="progress-bar-style-1">
        <h3>Progress Bar Style 1</h3>
        <div class="progress">
            <div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
                <h6>75%</h6>
            </div>
        </div>
    </div>

Progress Bar Style 2

 
75%
                
                        
    <div class="progress-bar-style-2">
        <h3>Progress Bar Style 2</h3>
        <div class="progress">
            <div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
    </div>

Progress Bar Style 3

70%
                
                        
    <div class="progress-bar-style-3">
        <h3>Progress Bar Style 3</h3>
        <div class="progress">
            <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 75%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
                <h6>75%</h6>
            </div>
        </div>
    </div>

Progress Bar Style 4

Web Design
72%
 
                
                        
    <div class="progress-bar-style-4">
        <h3>Progress Bar Style 4</h3>
        <div class="progress-details"><h5>Web Design</h5><h5>72%</h5></div>
        <div class="progress">
            <div class="progress-bar" role="progressbar" style="width: 55%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
    </div>