Core Code
Core Code Modern Dev Handbook

Basic Progress Bar

Create a simple progress bar using the Bootstrap progress component.

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" style="width:50%"></div>
</div>

</div>

</body>
</html>

More BS5 Progress Examples (7)

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 example Task Progress Example open example