Core Code
Core Code Modern Dev Handbook

Stacked Progress Bars

Stack multiple progress bars inside one container.

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">

<div class="progress">

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

<div class="progress-bar bg-warning" style="width:30%"></div>

<div class="progress-bar bg-danger" style="width:20%"></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 Custom Height Progress open example example Task Progress Example open example