Core Code
Core Code Modern Dev Handbook

Task Progress Example

Display project task completion using a labeled progress bar.

Preview

Code

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>

<div class="container py-5">

<h5>Project Completion</h5>

<div class="progress">

<div class="progress-bar bg-success" style="width:80%">
80% Complete
</div>

</div>

</div>

</body>
</html>

More BS5 Progress Examples (7)

example Basic Progress Bar open example example Progress Bar with Label open example example Contextual Progress Bars open example example Striped Progress Bar open example example Animated Progress Bar open example example Stacked Progress Bars open example example Custom Height Progress open example