Progress Bars

Progress Groups

Add the progress-group and progress-group-addon classes to a progress component to place an addon on either side of it.

30%

70%

<!-- Progress group with default progress bar -->

<div class="progress-group">
	<div class="progress">
		<div aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" class="progress-bar" role="progressbar" style="width: 30%;">
		</div>
	</div>
	<div class="progress-group-addon">
		30%
	</div>
</div>

<!-- Progress group with warning progress bar -->

<div class="progress-group progress-warning">
	<div class="progress">
		<div aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" class="progress-bar" role="progressbar" style="width: 70%;"></div>
	</div>
	<div class="progress-group-addon">70%</div>
</div>

<!-- Progress Group with progress bar success and a group-addon -->

<div class="progress-group progress-success">
	<div class="progress">
		<div aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" class="progress-bar" role="progressbar" style="width: 100%;"></div>
	</div>
	<div class="progress-group-addon">
		<div class="progress-group-feedback">
			<svg class="lexicon-icon lexicon-icon-check-circle" focusable="false" role="presentation">
				<use href="/images/icons/icons.svg#check-circle" />
			</svg>
		</div>
	</div>
</div>

<!-- Progress Group with default progress success and a group-addon -->

<div class="progress-group">
	<div class="progress-group-addon">
		<div class="progress-group-feedback">
			<svg class="lexicon-icon lexicon-icon-check-circle" focusable="false" role="presentation">
				<use href="/images/icons/icons.svg#check-circle" />
			</svg>
		</div>
	</div>
	<div class="progress">
		<div aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" class="progress-bar" role="progressbar" style="width: 100%;"></div>
	</div>
</div>

Progress Group Stacked

Add the progress-group-stacked class to a progress-group element to stack the addons and progress component.

60% Completed

<div class="progress-group progress-group-stacked">
	<div class="progress-group-addon">60% Completed</div>
	<div class="progress">
		<div aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" class="progress-bar" role="progressbar" style="width: 60%;"></div>
	</div>
	<div class="progress-group-addon">
		<svg class="lexicon-icon lexicon-icon-check-cog" focusable="false" role="presentation">
			<use href="/images/icons/icons.svg#check-cog" />
		</svg>
	</div>
</div>

Progress Variants

Add the progress-danger, progress-info, progress-success, or progress-warning class to a progress-group or progress element to provide visual feedback for different progress states. Color a block of text or icon by wrapping it with the progress-group-feedback class.

The variant classes set the background-color for a progress-bar, so Bootstrap 4 background utility classes are not required.

Progress

25%

50%

75%

100%

<div class="progress">
	<div aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" class="progress-bar" role="progressbar" style="width: 25%;">25%</div>
</div>

<!-- Progress Success -->

<div class="progress progress-success">
	<div aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" class="progress-bar progress-bar-striped" role="progressbar" style="width: 25%;">25%</div>
</div>

<!-- Progress Info -->

<div class="progress progress-info">
	<div aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" class="progress-bar" role="progressbar" style="width: 50%;">50%</div>
</div>

<!-- Progress Warning -->

<div class="progress progress-warning">
	<div aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" class="progress-bar progress-bar-animated progress-bar-striped" role="progressbar" style="width: 75%;">75%</div>
</div>

<!-- Progress Danger -->

<div class="progress progress-danger">
	<div aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" class="progress-bar" role="progressbar" style="width: 100%;">100%</div>
</div>

Progress Group

60%

<div class="progress-group">
	<div class="progress">
		<div aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" class="progress-bar" role="progressbar" style="width: 60%;"></div>
	</div>
	<div class="progress-group-addon">60%</div>
</div>

<div class="progress-group progress-success">
	<div class="progress">
		<div aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" class="progress-bar progress-bar-striped" role="progressbar" style="width: 100%;"></div>
	</div>
	<div class="progress-group-addon">
		<div class="progress-group-feedback">
			<svg class="lexicon-icon lexicon-icon-check-circle" focusable="false" role="presentation">
				<use href="/images/icons/icons.svg#check-circle" />
			</svg>
		</div>
	</div>
</div>

<div class="progress-group progress-info">
	<div class="progress">
		<div aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" class="progress-bar" role="progressbar" style="width: 100%;"></div>
	</div>
	<div class="progress-group-addon">
		<div class="progress-group-feedback">
			<svg class="lexicon-icon lexicon-icon-info-circle-open" focusable="false" role="presentation">
				<use href="/images/icons/icons.svg#info-circle-open" />
			</svg>
		</div>
	</div>
</div>

<div class="progress-group progress-warning">
	<div class="progress">
		<div aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" class="progress-bar progress-bar-animated progress-bar-striped" role="progressbar" style="width: 100%;"></div>
	</div>
	<div class="progress-group-addon">
		<div class="progress-group-feedback">
			<svg class="lexicon-icon lexicon-icon-exclamation-circle" focusable="false" role="presentation">
				<use href="/images/icons/icons.svg#exclamation-circle" />
			</svg>
		</div>
	</div>
</div>

Multiple Progress Bars

If you need multiple progress bars, use Bootstrap 4's background utilities: bg-primary, bg-success, bg-info, bg-warning, and bg-danger on progress-bar.

25%

50%

33%

45%

10%

<!-- Progress with bg-success -->
<div class="progress">
	<div class="bg-success progress-bar progress-bar-striped" style="width: 25%">25%</div>
	<div class="bg-success progress-bar" style="width: 25%">25%</div>
	<div class="bg-success progress-bar progress-bar-animated progress-bar-striped" style="width: 25%">25%</div>
</div>

<!-- Progress with bg-info -->
<div class="progress">
	<div class="bg-info progress-bar progress-bar-striped" style="width: 50%">50%</div>
	<div class="bg-info progress-bar" style="width: 50%">50%</div>
</div>

<!-- Progress with bg-warning -->
<div class="progress">
	<div class="bg-warning progress-bar progress-bar-animated progress-bar-striped" style="width: 33%">33%</div>
	<div class="bg-warning progress-bar progress-bar-striped" style="width: 33%">33%</div>
</div>

<!-- Progress with bg-danger -->
<div class="progress">
	<div class="bg-danger progress-bar" style="width: 45%">45%</div>
	<div class="bg-danger progress-bar progress-bar-animated progress-bar-striped" style="width: 45%">45%</div>
</div>

<div class="progress">
	<div class="progress-bar" style="width: 10%">10%</div>
	<div class="bg-warning progress-bar" style="width: 10%">10%</div>
	<div class="bg-success progress-bar" style="width: 10%">10%</div>
	<div class="bg-info progress-bar" style="width: 10%">10%</div>
	<div class="bg-success progress-bar progress-bar-striped" style="width: 10%">10%</div>
	<div class="bg-danger progress-bar progress-bar-animated progress-bar-striped" style="width: 10%">10%</div>
	<div class="progress-bar progress-bar-animated progress-bar-striped" style="width: 10%">10%</div>
</div>

Progress Sizes

Normal

25%

60%

<div class="progress">
	<div aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" class="progress-bar" role="progressbar" style="width: 25%;">25%</div>
</div>

<div class="progress-group">
	<div class="progress">
		<div aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" class="progress-bar" role="progressbar" style="width: 60%;"></div>
	</div>
	<div class="progress-group-addon">60%</div>
</div>

Large

45%

60%

<div class="progress progress-lg">
	<div aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" class="progress-bar" role="progressbar" style="width: 45%;">45%</div>
</div>

<div class="progress-group progress-lg">
	<div class="progress">
		<div aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" class="progress-bar" role="progressbar" style="width: 60%;"></div>
	</div>
	<div class="progress-group-addon">60%</div>
</div>

Progress with Bootstrap 4 Background Utility

60% (Success)

100% (Info)

40% (Warning)

80% (Danger)

<!-- Progress with bg-success -->
<div class="progress">
	<div aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" class="bg-success progress-bar" role="progressbar" style="width: 60%;">60% (Success)</div>
</div>

<!-- Progress with bg-info -->
<div class="progress">
	<div aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" class="bg-info progress-bar" role="progressbar" style="width: 100%;">100% (Info)</div>
</div>

<!-- Progress with bg-warning -->
<div class="progress">
	<div aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" class="bg-warning progress-bar" role="progressbar" style="width: 40%;">40% (Warning)</div>
</div>

<!-- Progress with bg-danger -->
<div class="progress">
	<div aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" class="bg-danger progress-bar" role="progressbar" style="width: 80%;">80% (Danger)</div>
</div>