Progress Bar

Progress


	<div class="progress mb-10" role="progressbar" aria-label="Basic example" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
		<div class="progress-bar" style="width: 0%"></div>
	</div>
	<div class="progress mb-10" role="progressbar" aria-label="Basic example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
		<div class="progress-bar" style="width: 25%"></div>
	</div>
	<div class="progress mb-10" role="progressbar" aria-label="Basic example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
		<div class="progress-bar" style="width: 50%"></div>
	</div>
	<div class="progress mb-10" role="progressbar" aria-label="Basic example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
		<div class="progress-bar" style="width: 75%"></div>
	</div>
	<div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
		<div class="progress-bar" style="width: 100%"></div>
	</div>

Bar Sizing Width


	<div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
		<div class="progress-bar w-75"></div>
	</div>

Bar Sizing Height


	<div class="progress mb-10" role="progressbar" aria-label="Example 1px high" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="height: 1px">
		<div class="progress-bar" style="width: 25%"></div>
	</div>
	<div class="progress" role="progressbar" aria-label="Example 20px high" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="height: 20px">
		<div class="progress-bar" style="width: 25%"></div>
	</div>

Labels

25%

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

Labels Text

Long label text for the progress bar, set to a dark color

	<div class="progress" role="progressbar" aria-label="Example with label" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
		<div class="progress-bar overflow-visible text-dark" style="width: 10%">Long label text for the progress bar, set to a dark color</div>
	</div>

Backgrounds


	<div class="progress mb-10" role="progressbar" aria-label="Success example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
		<div class="progress-bar bg-success" style="width: 25%"></div>
	</div>
	<div class="progress mb-10" role="progressbar" aria-label="Info example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
		<div class="progress-bar bg-info" style="width: 50%"></div>
	</div>
	<div class="progress mb-10" role="progressbar" aria-label="Warning example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
		<div class="progress-bar bg-warning" style="width: 75%"></div>
	</div>
	<div class="progress" role="progressbar" aria-label="Danger example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
		<div class="progress-bar bg-danger" style="width: 100%"></div>
	</div>

Progress Bar Present

25%
50%
75%
100%

	<div class="progress mb-10" role="progressbar" aria-label="Success example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
		<div class="progress-bar bg-success" style="width: 25%">25%</div>
	</div>
	<div class="progress mb-10" role="progressbar" aria-label="Info example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
		<div class="progress-bar bg-info text-dark" style="width: 50%">50%</div>
	</div>
	<div class="progress mb-10" role="progressbar" aria-label="Warning example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
		<div class="progress-bar bg-warning text-dark" style="width: 75%">75%</div>
	</div>
	<div class="progress" role="progressbar" aria-label="Danger example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
		<div class="progress-bar bg-danger" style="width: 100%">100%</div>
	</div>

Multiple Bars


	<div class="progress-stacked">
		<div class="progress" role="progressbar" aria-label="Segment one" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100" style="width: 15%">
			<div class="progress-bar"></div>
		</div>
		<div class="progress" role="progressbar" aria-label="Segment two" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width: 30%">
			<div class="progress-bar bg-success"></div>
		</div>
		<div class="progress" role="progressbar" aria-label="Segment three" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
			<div class="progress-bar bg-info"></div>
		</div>
	</div>

Striped Bars


	<div class="progress mb-10" role="progressbar" aria-label="Default striped example" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
		<div class="progress-bar progress-bar-striped" style="width: 10%"></div>
	</div>
	<div class="progress mb-10" role="progressbar" aria-label="Success striped example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
		<div class="progress-bar progress-bar-striped bg-success" style="width: 25%"></div>
	</div>
	<div class="progress mb-10" role="progressbar" aria-label="Info striped example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
		<div class="progress-bar progress-bar-striped bg-info" style="width: 50%"></div>
	</div>
	<div class="progress mb-10" role="progressbar" aria-label="Warning striped example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
		<div class="progress-bar progress-bar-striped bg-warning" style="width: 75%"></div>
	</div>
	<div class="progress" role="progressbar" aria-label="Danger striped example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
		<div class="progress-bar progress-bar-striped bg-danger" style="width: 100%"></div>
	</div>

Animated Stripes


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

Theme System