Documentation and examples for Bootstrap’s powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more, including support for our collapse plugin.
Example
<div class= "progress-wrapper" >
<div class= "progress-info" >
<div class= "progress-label" >
<span> Task completed</span>
</div>
<div class= "progress-percentage" >
<span> 60%</span>
</div>
</div>
<div class= "progress" >
<div class= "progress-bar bg-default" role= "progressbar" aria-valuenow= "60" aria-valuemin= "0" aria-valuemax= "100" style= "width: 60%;" ></div>
</div>
</div>
<div class= "progress-wrapper" >
<div class= "progress-info" >
<div class= "progress-label" >
<span> Task completed</span>
</div>
<div class= "progress-percentage" >
<span> 60%</span>
</div>
</div>
<div class= "progress" >
<div class= "progress-bar bg-primary" role= "progressbar" aria-valuenow= "60" aria-valuemin= "0" aria-valuemax= "100" style= "width: 60%;" ></div>
</div>
</div>
<div class= "progress-wrapper" >
<div class= "progress-info" >
<div class= "progress-label" >
<span> Task completed</span>
</div>
<div class= "progress-percentage" >
<span> 60%</span>
</div>
</div>
<div class= "progress" >
<div class= "progress-bar bg-secondary" role= "progressbar" aria-valuenow= "60" aria-valuemin= "0" aria-valuemax= "100" style= "width: 60%;" ></div>
</div>
</div>
<div class= "progress-wrapper" >
<div class= "progress-info" >
<div class= "progress-label" >
<span> Task completed</span>
</div>
<div class= "progress-percentage" >
<span> 60%</span>
</div>
</div>
<div class= "progress" >
<div class= "progress-bar bg-info" role= "progressbar" aria-valuenow= "60" aria-valuemin= "0" aria-valuemax= "100" style= "width: 60%;" ></div>
</div>
</div>
<div class= "progress-wrapper" >
<div class= "progress-info" >
<div class= "progress-label" >
<span> Task completed</span>
</div>
<div class= "progress-percentage" >
<span> 60%</span>
</div>
</div>
<div class= "progress" >
<div class= "progress-bar bg-success" role= "progressbar" aria-valuenow= "60" aria-valuemin= "0" aria-valuemax= "100" style= "width: 60%;" ></div>
</div>
</div>
<div class= "progress-wrapper" >
<div class= "progress-info" >
<div class= "progress-label" >
<span> Task completed</span>
</div>
<div class= "progress-percentage" >
<span> 60%</span>
</div>
</div>
<div class= "progress" >
<div class= "progress-bar bg-danger" role= "progressbar" aria-valuenow= "60" aria-valuemin= "0" aria-valuemax= "100" style= "width: 60%;" ></div>
</div>
</div>
<div class= "progress-wrapper" >
<div class= "progress-info" >
<div class= "progress-label" >
<span> Task completed</span>
</div>
<div class= "progress-percentage" >
<span> 60%</span>
</div>
</div>
<div class= "progress" >
<div class= "progress-bar bg-warning" role= "progressbar" aria-valuenow= "60" aria-valuemin= "0" aria-valuemax= "100" style= "width: 60%;" ></div>
</div>
</div>