Menu
Bootstrap 5 Progress Bars
Basic Progress Bar
A progress bar can be used to show how far a user is in a process.
To create a default progress bar, add a .progress class to a container element and add the .progress-bar class to its child element. Use the CSS width property to set the width of the progress bar:
Example
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap Example</title>
<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”>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js”></script>
</head>
<body>
<div>
<h2>Basic Progress Bar</h2>
<p>To create a default progress bar, add a .progress class to a container element and add the progress-bar class to its child element. Use the CSS width property to set the width of the progress bar:</p>
<div>
<div style=”width:70%”></div>
</div>
</div>
</body>
</html>
Progress Bar Height
The height of the progress bar is 1rem (usually 16px) by default. Use the CSS height property to change it:
Example
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap Example</title>
<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”>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js”></script>
</head>
<body>
<div>
<h2>Progress Bar Height</h2>
<p>The height of the progress bar is 1rem (16px) by default. Use the CSS height property to change the height:</p>
<div style=”height:10px”>
<div style=”width:40%;”></div>
</div>
<br>
<div style=”height:20px”>
<div style=”width:50%;”></div>
</div>
<br>
<div style=”height:30px”>
<div style=”width:60%;”></div>
</div>
</div>
</body>
</html>
Progress Bar Labels
Add text inside the progress bar to show the visible percentage:
Example
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap Example</title>
<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”>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js”></script>
</head>
<body>
<div>
<h2>Progress Bar With Label</h2>
<div>
<div style=”width:70%”>70%</div>
</div>
</div>
</body>
</html>
Colored Progress Bars
By default, the progress bar is blue (primary). Use any of the contextual background classes to change its color:
Example
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap Example</title>
<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”>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js”></script>
</head>
<body>
<div>
<h2>Colored Progress Bars</h2>
<p>Use any of the contextual color classes to change the color of the progress bar:</p>
<!– Blue –>
<div>
<div style=”width:10%”></div>
</div><br>
<!– Green –>
<div>
<div style=”width:20%”></div>
</div><br>
<!– Turquoise –>
<div>
<div style=”width:30%”></div>
</div><br>
<!– Orange –>
<div>
<div style=”width:40%”></div>
</div><br>
<!– Red –>
<div>
<div style=”width:50%”></div>
</div><br>
<!– White –>
<div>
<div style=”width:60%”></div>
</div><br>
<!– Grey –>
<div>
<div style=”width:70%”></div>
</div><br>
<!– Light Grey –>
<div>
<div style=”width:80%”></div>
</div><br>
<!– Dark Grey –>
<div>
<div style=”width:90%”></div>
</div>
</div>
</body>
</html>
Striped Progress Bars
Use the .progress-bar-striped class to add stripes to the progress bars:
Example
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap Example</title>
<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”>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js”></script>
</head>
<body>
<div>
<h2>Striped Progress Bars</h2>
<p>The .progress-bar-striped class adds stripes to the progress bars:</p>
<div>
<div style=”width:30%”></div>
</div>
<br>
<div>
<div style=”width:40%”></div>
</div>
<br>
<div>
<div style=”width:50%”></div>
</div>
<br>
<div>
<div style=”width:60%”></div>
</div>
<br>
<div>
<div style=”width:70%”></div>
</div>
</div>
</body>
</html>
Animated Progress Bar
Add the .progress-bar-animated class to animate the progress bar:
Example
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap Example</title>
<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”>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js”></script>
</head>
<body>
<div>
<h2>Animated Progress Bar</h2>
<p>Add the .progress-bar-animated class to animate the progress bar:</p>
<div>
<div style=”width:40%”></div>
</div>
</div>
</body>
</html>
Multiple Progress Bars
Progress bars can also be stacked:
Example
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap Example</title>
<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”>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js”></script>
</head>
<body>
<div>
<h2>Multiple Progress Bars</h2>
<p>Create a stacked progress bar by placing multiple bars into the same div with:</p>
<div>
<div style=”width:40%”>
Free Space
</div>
<div style=”width:10%”>
Warning
</div>
<div style=”width:20%”>
Danger
</div>
</div>
</div>
</body>
</html>