brand v1.0
Utilities
Data Display
Data Entry
Feedback
Tables
Charts
Maps
Navigation
Behavioral
Layout
Explore Templates

Progress

Documentation and examples for using Bootstrap custom progress bars featuring support for stacked bars, animated backgrounds, and text labels.

Basic Progress

Basic progress in diffrent color backgrounds. Add .bg-* modifier class to change the color. Use Bootstrap width utilities for setting the width of a progress bar.

														
<div class="progress mb-5">
	<div class="progress-bar bg-primary w-25" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress mb-5">
	<div class="progress-bar bg-success w-50" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
	<div class="progress-bar bg-warning w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
Class Values
class="progress-bar bg-[value]" primary / success / warning / danger / info / red / green / pink / purple / violet / indigo / blue / sky / cyan / teal / neon / lime / sun / yellow / orange / pumpkin / brown / gray / gold / smoke / light / dark
Animated Progress

Use the .progress.progress-width-animated class.

25
50
75
														
<div class="progress progress-width-animated mb-5">
	<div class="progress-bar  bg-primary" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" ><span class="progress-tooltip">25</span></div>
</div>
<div class="progress progress-width-animated mb-5">
	<div class="progress-bar  bg-success" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"><span class="progress-tooltip">50</span></div>
</div>
<div class="progress progress-width-animated">
	<div class="progress-bar  bg-warning" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"><span class="progress-tooltip">75</span></div>
</div>
Rounded Progress

Create rounded progress using .progress .progress-bar-rounded class.

														
<div class="progress progress-bar-rounded mb-5">
	<div class="progress-bar bg-primary w-25" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress progress-bar-rounded mb-5">
	<div class="progress-bar bg-success w-50" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress progress-bar-rounded">
	<div class="progress-bar bg-warning w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
Striped Progress

Add .progress-bar-striped to any .progress-bar to apply a stripe via CSS gradient over the progress bar’s background color. Add .progress-bar-animated to .progress-bar to animate the stripes right to left via CSS3 animations.

														
<div class="progress mb-5">
	<div class="progress-bar progress-bar-striped bg-primary w-25" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress mb-5">
	<div class="progress-bar progress-bar-striped bg-success w-30" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress mb-5">
	<div class="progress-bar progress-bar-striped bg-info w-50" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress mb-5">
	<div class="progress-bar  progress-bar-striped bg-warning progress-bar-animated w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
	<div class="progress-bar  progress-bar-striped bg-danger progress-bar-animated w-100" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
Progress sizes

Size whatever you want just add .progress-xs, sm, md, lg, xl or you can just add height utility classes.

														
<div class="progress progress-bar-xs mb-5">
	<div class="progress-bar bg-primary w-25" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress progress-bar-sm mb-5">
	<div class="progress-bar bg-primary w-50" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress progress-bar-md mb-5">
	<div class="progress-bar bg-primary w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress progress-bar-lg mb-5">
	<div class="progress-bar bg-primary w-85" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress progress-bar-xl">
	<div class="progress-bar bg-primary w-100" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
Progress with labels

Add labels on top of your progress bars by placing text within the .progress-label inside .progress-lb-wrap and for label left add class .lb-side-left with .progress-wrap .

Labels on left
Labels inside
25%
50%
loading
photoshop
														
<div class="progress-lb-wrap mb-3">
	<label class="progress-label">organic</label>
	<div class="progress progress-bar-xs">
		<div class="progress-bar bg-primary w-25" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
	</div>
</div>
<div class="progress-lb-wrap mb-3">
	<label class="progress-label">Referral</label>
	<div class="progress progress-bar-xs">
		<div class="progress-bar bg-success w-50" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
	</div>
</div>
<div class="progress-lb-wrap mb-3">
	<label class="progress-label">email</label>
	<div class="progress progress-bar-xs">
		<div class="progress-bar bg-info w-50" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
	</div>
</div>
<div class="progress-lb-wrap">
	<label class="progress-label">paid search</label>
	<div class="progress progress-bar-xs">
		<div class="progress-bar bg-warning w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
	</div>
</div>
<div class="title-sm mt-5">Labels on left</div>
<div class="row">
	<div class="col-md-6 col-sm">
		<div class="progress-wrap lb-side-left">
			<div class="progress-lb-wrap mb-5">
				<label class="progress-label mnw-100p">organic</label>
				<div class="progress progress-bar-xs">
					<div class="progress-bar bg-primary w-25" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
				</div>
			</div>
			<div class="progress-lb-wrap mb-5">
				<label class="progress-label mnw-100p">Referral</label>
				<div class="progress progress-bar-xs">
					<div class="progress-bar bg-success w-40" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
				</div>
			</div>
		</div>
	</div>
	<div class="col-md-6 col-sm">
		<div class="progress-wrap lb-side-left">
			<div class="progress-lb-wrap mb-5">
				<label class="progress-label mnw-100p">email</label>
				<div class="progress progress-bar-xs">
					<div class="progress-bar bg-info w-50" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
				</div>
			</div>
			<div class="progress-lb-wrap mb-5">
				<label class="progress-label mnw-100p">paid search</label>
				<div class="progress progress-bar-xs">
					<div class="progress-bar bg-warning w-75" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
				</div>
			</div>
		</div>
	</div>
</div>
<div class="title-sm">Labels inside</div>
<div class="row">
	<div class="col-md-6 col-sm">
		<div class="progress-wrap">
			<div class="progress-lb-wrap mb-5">
				<div class="progress">
					<div class="progress-bar bg-primary w-25" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
				</div>
			</div>
			<div class="progress-lb-wrap mb-5">
				<div class="progress">
					<div class="progress-bar bg-info w-50" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">50%</div>
				</div>
			</div>
		</div>
	</div>
	<div class="col-md-6 col-sm">
		<div class="progress-wrap">
			<div class="progress-lb-wrap mb-5">
				<div class="progress">
					<div class="progress-bar bg-success w-50" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">loading</div>
				</div>
			</div>
			<div class="progress-lb-wrap">
				<div class="progress">
					<div class="progress-bar bg-danger w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">photoshop</div>
				</div>
			</div>
		</div>
	</div>
</div>
Multiple Bars

Include multiple progress bars in a progress component if you need.

														
<div class="progress">
	<div class="progress-bar w-25" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
	<div class="progress-bar bg-success w-30" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
	<div class="progress-bar bg-danger w-40" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
</div>
Jump to