Alerts

A simple primary alert—check it out!

A simple secondary alert—check it out!

A simple success alert—check it out!

A simple danger alert—check it out!

A simple warning alert—check it out!

A simple info alert—check it out!

A simple light alert—check it out!

A simple dark alert—check it out!

<div class="alert alert-primary" role="alert">
	A simple primary alert—check it out!
</div>
<div class="alert alert-secondary" role="alert">
	A simple secondary alert—check it out!
</div>
<div class="alert alert-success" role="alert">
	A simple success alert—check it out!
</div>
<div class="alert alert-danger" role="alert">
	A simple danger alert—check it out!
</div>
<div class="alert alert-warning" role="alert">
	A simple warning alert—check it out!
</div>
<div class="alert alert-info" role="alert">
	A simple info alert—check it out!
</div>
<div class="alert alert-light" role="alert">
	A simple light alert—check it out!
</div>
<div class="alert alert-dark" role="alert">
	A simple dark alert—check it out!
</div>

Alerts with Links

A simple primary alert with an example link. Give it a click if you like.

A simple secondary alert with an example link. Give it a click if you like.

A simple success alert with an example link. Give it a click if you like.

A simple danger alert with an example link. Give it a click if you like.

A simple warning alert with an example link. Give it a click if you like.

A simple info alert with an example link. Give it a click if you like.

A simple light alert with an example link. Give it a click if you like.

A simple dark alert with an example link. Give it a click if you like.

<div class="alert alert-primary" role="alert">
	A simple primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-secondary" role="alert">
	A simple secondary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-success" role="alert">
	A simple success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-danger" role="alert">
	A simple danger alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-warning" role="alert">
	A simple warning alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-info" role="alert">
	A simple info alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-light" role="alert">
	A simple light alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-dark" role="alert">
	A simple dark alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>

Alerts with Additional content

Well done!

Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.

Whenever you need to, be sure to use margin utilities to keep things nice and tidy.

<div class="alert alert-success" role="alert">
	<h4 class="alert-heading">Well done!</h4>
	<p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
	<hr>
	<p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
</div>

Alert with Dismissal

Holy guacamole! You should check in on some of those fields below.

<div class="alert alert-warning alert-dismissible fade show" role="alert">
	<strong>Holy guacamole!</strong> You should check in on some of those fields below.
	<button type="button" class="close" data-dismiss="alert" aria-label="Close">
		<span aria-hidden="true">&times;</span>
	</button>
</div>

Badges

Example heading New

<h1>Example heading <span class="badge badge-secondary">New</span></h1>
<h2>Example heading <span class="badge badge-secondary">New</span></h2>
<h3>Example heading <span class="badge badge-secondary">New</span></h3>
<h4>Example heading <span class="badge badge-secondary">New</span></h4>
<h5>Example heading <span class="badge badge-secondary">New</span></h5>
<h6>Example heading <span class="badge badge-secondary">New</span></h6>

Badge used with button for counter

<button type="button" class="btn btn-primary">
	Notifications <span class="badge badge-light">4</span>
</button>

Contextual variations

Primary
Secondary
Success
Danger
Warning
Info
Light
Dark

<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-light">Light</span>
<span class="badge badge-dark">Dark</span>

Pill badges

Primary
Secondary
Success
Danger
Warning
Info
Light
Dark

<span class="badge badge-pill badge-primary">Primary</span>
<span class="badge badge-pill badge-secondary">Secondary</span>
<span class="badge badge-pill badge-success">Success</span>
<span class="badge badge-pill badge-danger">Danger</span>
<span class="badge badge-pill badge-warning">Warning</span>
<span class="badge badge-pill badge-info">Info</span>
<span class="badge badge-pill badge-light">Light</span>
<span class="badge badge-pill badge-dark">Dark</span>

<a href="#" class="badge badge-primary">Primary</a>
<a href="#" class="badge badge-secondary">Secondary</a>
<a href="#" class="badge badge-success">Success</a>
<a href="#" class="badge badge-danger">Danger</a>
<a href="#" class="badge badge-warning">Warning</a>
<a href="#" class="badge badge-info">Info</a>
<a href="#" class="badge badge-light">Light</a>
<a href="#" class="badge badge-dark">Dark</a>

Buttons

See Buttons in the Shortcode Cookbook

Notice buttons

<p><button type="button" class="btn btn-success">Success</button></p>
<p><button type="button" class="btn btn-danger">Danger</button></p>
<p><button type="button" class="btn btn-warning">Warning</button></p>
<p><button type="button" class="btn btn-info">Info</button></p>

Cards

See Cards in the Shortcode Cookbook

Collapse (AKA Accordion)

See Accordions in the Shortcode Cookbook

Forms

<form>
	<div class="form-group">
		<label for="exampleInputEmail1">Email address</label>
		<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
		<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
	</div>
	<div class="form-group">
		<label for="exampleInputPassword1">Password</label>
		<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password" autocomplete="current-password">
	</div>
	<div class="form-group form-check">
		<input type="checkbox" class="form-check-input" id="exampleCheck1">
		<label class="form-check-label" for="exampleCheck1">Check me out</label>
	</div>
	<button type="submit" class="btn btn-primary">Submit</button>
</form>

Form Controls

<form>
	<div class="form-group">
		<label for="exampleFormControlInput1">Email address</label>
		<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
	</div>
	<div class="form-group">
		<label for="exampleFormControlSelect1">Example select</label>
		<select class="form-control" id="exampleFormControlSelect1">
		<option>1</option>
		<option>2</option>
		<option>3</option>
		<option>4</option>
		<option>5</option>
		</select>
	</div>
	<div class="form-group">
		<label for="exampleFormControlSelect2">Example multiple select</label>
		<select multiple class="form-control" id="exampleFormControlSelect2">
		<option>1</option>
		<option>2</option>
		<option>3</option>
		<option>4</option>
		<option>5</option>
		</select>
	</div>
	<div class="form-group">
		<label for="exampleFormControlTextarea1">Example textarea</label>
		<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
	</div>
	<div class="form-group">
		<label for="exampleFormControlFile1">Example file input</label>
		<input type="file" class="form-control-file" id="exampleFormControlFile1">
	</div>
</form>

Form sizing

<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg" style="margin-bottom: 10px;">
<input class="form-control" type="text" placeholder="Default input" style="margin-bottom: 10px;">
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm" style="margin-bottom: 10px;">
<select class="form-control form-control-lg" style="margin-bottom: 10px;" aria-label="Large select example">
	<option>Large select</option>
</select>
<select class="form-control" style="margin-bottom: 10px;" aria-label="Default select example">
	<option>Default select</option>
</select>
<select class="form-control form-control-sm" style="margin-bottom: 10px;" aria-label="Small select example">
	<option>Small select</option>
</select>

Read Only

<input class="form-control" type="text" placeholder="Readonly input here..." readonly>

<form>
	<div class="form-group row">
		<label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
		<div class="col-sm-10">
		<input type="text" readonly class="form-control-plaintext" id="staticEmail" value="email@example.com">
		</div>
	</div>
	<div class="form-group row">
		<label for="inputPassword" class="col-sm-2 col-form-label">Password</label>
		<div class="col-sm-10">
		<input type="password" class="form-control" id="inputPassword" placeholder="Password" autocomplete="current-password">
		</div>
	</div>
</form>

<form class="form-inline">
	<div class="form-group mb-2">
		<label for="staticEmail2" class="sr-only">Email</label>
		<input type="text" readonly class="form-control-plaintext" id="staticEmail2" value="email@example.com">
	</div>
	<div class="form-group mx-sm-3 mb-2">
		<label for="inputPassword2" class="sr-only">Password</label>
		<input type="password" class="form-control" id="inputPassword2" placeholder="Password" autocomplete="current-password">
	</div>
	<button type="submit" class="btn btn-primary mb-2">Confirm identity</button>
</form>

Range Inputs

<form>
	<div class="form-group">
		<label for="formControlRange">Example Range input</label>
		<input type="range" class="form-control-range" id="formControlRange">
	</div>
</form>

Custom Checkboxes and Radios

Default checkbox

Disabled checkbox

Default radio

Second default radio

Disabled radio

3 (disabled)

<div class="custom-control custom-checkbox">
	<input class="custom-control-input" type="checkbox" value="" id="defaultCheck1">
	<label class="custom-control-label" for="defaultCheck1">
		Default checkbox
	</label>
</div>
<div class="custom-control custom-checkbox">
	<input class="custom-control-input" type="checkbox" value="" id="defaultCheck2" disabled>
	<label class="custom-control-label" for="defaultCheck2">
		Disabled checkbox
	</label>
</div>
<div class="custom-control custom-radio">
	<input class="custom-control-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
	<label class="custom-control-label" for="exampleRadios1">
		Default radio
	</label>
</div>
<div class="custom-control custom-radio">
	<input class="custom-control-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
	<label class="custom-control-label" for="exampleRadios2">
		Second default radio
	</label>
</div>
<div class="custom-control custom-radio">
	<input class="custom-control-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
	<label class="custom-control-label" for="exampleRadios3">
		Disabled radio
	</label>
</div>
<div class="custom-control custom-checkbox custom-control-inline">
	<input class="custom-control-input" type="checkbox" id="inlineCheckbox1" value="option1">
	<label class="custom-control-label" for="inlineCheckbox1">1</label>
</div>
<div class="custom-control custom-checkbox custom-control-inline">
	<input class="custom-control-input" type="checkbox" id="inlineCheckbox2" value="option2">
	<label class="custom-control-label" for="inlineCheckbox2">2</label>
</div>
<div class="custom-control custom-checkbox custom-control-inline">
	<input class="custom-control-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled>
	<label class="custom-control-label" for="inlineCheckbox3">3 (disabled)</label>
</div>
<br />
<div class="custom-control custom-radio custom-control-inline">
	<input class="custom-control-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
	<label class="custom-control-label" for="inlineRadio1">1</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
	<input class="custom-control-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
	<label class="custom-control-label" for="inlineRadio2">2</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
	<input class="custom-control-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled>
	<label class="custom-control-label" for="inlineRadio3">3 (disabled)</label>
</div>

Default Checkboxes and Radios

Default checkbox

Disabled checkbox

Default radio

Second default radio

Disabled radio

3 (disabled)

<div class="default-checkbox">
	<input class="checkbox-input" type="checkbox" value="" id="defaultCheck1">
	<label class="checkbox-label" for="defaultCheck1">
		Default checkbox
	</label>
</div>
<div class="default-checkbox">
	<input class="checkbox-input" type="checkbox" value="" id="defaultCheck2" disabled>
	<label class="checkbox-label" for="defaultCheck2">
		Disabled checkbox
	</label>
</div>
<div class="default-radio">
	<input class="checkbox-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
	<label class="checkbox-label" for="exampleRadios1">
		Default radio
	</label>
</div>
<div class="default-radio">
	<input class="radio-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
	<label class="radio-label" for="exampleRadios2">
		Second default radio
	</label>
</div>
<div class="default-radio">
	<input class="radio-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
	<label class="radio-label" for="exampleRadios3">
		Disabled radio
	</label>
</div>
<div class="checkbox-inline custom-control-inline">
	<input class="custom-control-input" type="checkbox" id="inlineCheckbox1" value="option1">
	<label class="custom-control-label" for="inlineCheckbox1">1</label>
</div>
<div class="checkbox-inline custom-control-inline">
	<input class="custom-control-input" type="checkbox" id="inlineCheckbox2" value="option2">
	<label class="custom-control-label" for="inlineCheckbox2">2</label>
</div>
<div class="checkbox-inline custom-control-inline">
	<input class="custom-control-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled>
	<label class="custom-control-label" for="inlineCheckbox3">3 (disabled)</label>
</div>
<br />
<div class="radio-inline custom-control-inline">
	<input class="radio-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
	<label class="radio-label" for="inlineRadio1">1</label>
</div>
<div class="radio-inline custom-control-inline">
	<input class="radio-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
	<label class="radio-label" for="inlineRadio2">2</label>
</div>
<div class="radio-inline custom-control-inline">
	<input class="radio-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled>
	<label class="radio-label" for="inlineRadio3">3 (disabled)</label>
</div>

Form groups

<form>
	<div class="form-group">
		<label for="formGroupExampleInput">Example label</label>
		<input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
	</div>
	<div class="form-group">
		<label for="formGroupExampleInput2">Another label</label>
		<input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
	</div>
</form>

Form grid

<form>
	<div class="row">
		<div class="col">
		<input type="text" class="form-control" placeholder="First name">
		</div>
		<div class="col">
		<input type="text" class="form-control" placeholder="Last name">
		</div>
	</div>
</form>

<form>
	<div class="form-row">
		<div class="form-group col-md-6">
		<label for="inputEmail4">Email</label>
		<input type="email" class="form-control" id="inputEmail4" placeholder="Email">
		</div>
		<div class="form-group col-md-6">
		<label for="inputPassword4">Password</label>
		<input type="password" class="form-control" id="inputPassword4" placeholder="Password">
		</div>
	</div>
	<div class="form-group">
		<label for="inputAddress">Address</label>
		<input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
	</div>
	<div class="form-group">
		<label for="inputAddress2">Address 2</label>
		<input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
	</div>
	<div class="form-row">
		<div class="form-group col-md-6">
		<label for="inputCity">City</label>
		<input type="text" class="form-control" id="inputCity">
		</div>
		<div class="form-group col-md-4">
		<label for="inputState">State</label>
		<select id="inputState" class="form-control">
			<option selected>Choose...</option>
			<option>...</option>
		</select>
		</div>
		<div class="form-group col-md-2">
		<label for="inputZip">Zip</label>
		<input type="text" class="form-control" id="inputZip">
		</div>
	</div>
	<div class="form-group">
		<div class="form-check">
		<input class="form-check-input" type="checkbox" id="gridCheck">
		<label class="form-check-label" for="gridCheck">
			Check me out
		</label>
		</div>
	</div>
	<button type="submit" class="btn btn-primary">Sign in</button>
</form>

Horizontal form label sizing

<form>
	<div class="form-group row">
		<label for="colFormLabelSm" class="col-sm-2 col-form-label col-form-label-sm">Email</label>
		<div class="col-sm-10">
		<input type="email" class="form-control form-control-sm" id="colFormLabelSm" placeholder="col-form-label-sm">
		</div>
	</div>
	<div class="form-group row">
		<label for="colFormLabel" class="col-sm-2 col-form-label">Email</label>
		<div class="col-sm-10">
		<input type="email" class="form-control" id="colFormLabel" placeholder="col-form-label">
		</div>
	</div>
	<div class="form-group row">
		<label for="colFormLabelLg" class="col-sm-2 col-form-label col-form-label-lg">Email</label>
		<div class="col-sm-10">
		<input type="email" class="form-control form-control-lg" id="colFormLabelLg" placeholder="col-form-label-lg">
		</div>
	</div>
</form>

Form column sizing

<form>
	<div class="form-row">
		<div class="col-7">
			<input type="text" class="form-control" placeholder="City">
		</div>
		<div class="col">
			<input type="text" class="form-control" placeholder="State">
		</div>
		<div class="col">
			<input type="text" class="form-control" placeholder="Zip">
		</div>
	</div>
</form>

Form Auto-sizing

<form>
	<div class="form-row align-items-center">
		<div class="col-auto">
			<label class="sr-only" for="inlineFormInput">Name</label>
			<input type="text" class="form-control mb-2" id="inlineFormInput" placeholder="Jane Doe">
		</div>
		<div class="col-auto">
			<label class="sr-only" for="inlineFormInputGroup">Username</label>
			<div class="input-group mb-2">
				<div class="input-group-prepend">
					<div class="input-group-text">@</div>
				</div>
			<input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Username">
			</div>
		</div>
		<div class="col-auto">
			<div class="form-check mb-2">
				<input class="form-check-input" type="checkbox" id="autoSizingCheck">
				<label class="form-check-label" for="autoSizingCheck">
				Remember me
				</label>
			</div>
		</div>
		<div class="col-auto">
			<button type="submit" class="btn btn-primary mb-2">Submit</button>
		</div>
	</div>
</form>

<form>
	<div class="form-row align-items-center my-1">
		<div class="col-sm-3">
		<label class="sr-only" for="inlineFormInputName">Name</label>
		<input type="text" class="form-control" id="inlineFormInputName" placeholder="Jane Doe">
		</div>
		<div class="col-sm-3">
		<label class="sr-only" for="inlineFormInputGroupUsername">Username</label>
		<div class="input-group">
			<div class="input-group-prepend">
			<div class="input-group-text">@</div>
			</div>
			<input type="text" class="form-control" id="inlineFormInputGroupUsername" placeholder="Username">
		</div>
		</div>
		<div class="col-auto">
		<div class="form-check">
			<input class="form-check-input" type="checkbox" id="autoSizingCheck2">
			<label class="form-check-label" for="autoSizingCheck2">
			Remember me
			</label>
		</div>
		</div>
		<div class="col-auto">
		<button type="submit" class="btn btn-primary">Submit</button>
		</div>
	</div>
</form>

<form>
	<div class="form-row align-items-center my-1">
		<div class="col-auto">
		<label class="mr-sm-2 sr-only" for="inlineFormCustomSelect">Preference</label>
		<select class="custom-select mr-sm-2" id="inlineFormCustomSelect">
			<option selected>Choose...</option>
			<option value="1">One</option>
			<option value="2">Two</option>
			<option value="3">Three</option>
		</select>
		</div>
		<div class="col-auto">
		<div class="custom-control custom-checkbox mr-sm-2">
			<input type="checkbox" class="custom-control-input" id="customControlAutosizing">
			<label class="custom-control-label" for="customControlAutosizing">Remember my preference</label>
		</div>
		</div>
		<div class="col-auto">
		<button type="submit" class="btn btn-primary">Submit</button>
		</div>
	</div>
</form>

Help text

Password
Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.

<label for="inputPassword5">Password</label>
<input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock" autocomplete="current-password">
<small id="passwordHelpBlock" class="form-text text-muted">
Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
</small>

<form class="form-inline">
	<div class="form-group">
		<label for="inputPassword6">Password</label>
		<input type="password" id="inputPassword6" class="form-control mx-sm-3" aria-describedby="passwordHelpInline" autocomplete="current-password">
		<small id="passwordHelpInline" class="text-muted">
		Must be 8-20 characters long.
		</small>
	</div>
</form>

Disabled forms

<form>
	<fieldset disabled>
		<legend>You can't do anything with any of these fields.</legend>
		<div class="form-group">
		<label for="disabledTextInput">Disabled input</label>
		<input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
		</div>
		<div class="form-group">
		<label for="disabledSelect">Disabled select menu</label>
		<select id="disabledSelect" class="form-control">
			<option>Disabled select</option>
		</select>
		</div>
		<div class="form-group">
		<div class="form-check">
			<input class="form-check-input" type="checkbox" id="disabledFieldsetCheck" disabled>
			<label class="form-check-label" for="disabledFieldsetCheck">
			Can't check this
			</label>
		</div>
		</div>
		<button type="submit" class="btn btn-primary">Submit</button>
	</fieldset>
</form>

Form validation

Submit form as-is to see validation messages and styling.

<form class="needs-validation" novalidate>
	<div class="form-row">
		<div class="col-md-4 mb-3">
		<label for="validationCustom01">First name</label>
		<input type="text" class="form-control" id="validationCustom01" placeholder="First name" value="Mark" required>
		<div class="valid-feedback">
			Looks good!
		</div>
		</div>
		<div class="col-md-4 mb-3">
		<label for="validationCustom02">Last name</label>
		<input type="text" class="form-control" id="validationCustom02" placeholder="Last name" value="Otto" required>
		<div class="valid-feedback">
			Looks good!
		</div>
		</div>
		<div class="col-md-4 mb-3">
		<label for="validationCustomUsername">Username</label>
		<div class="input-group">
			<div class="input-group-prepend">
			<span class="input-group-text" id="inputGroupPrepend">@</span>
			</div>
			<input type="text" class="form-control" id="validationCustomUsername" placeholder="Username" aria-describedby="inputGroupPrepend" required>
			<div class="invalid-feedback">
			Please choose a username.
			</div>
		</div>
		</div>
	</div>
	<div class="form-row">
		<div class="col-md-6 mb-3">
		<label for="validationCustom03">City</label>
		<input type="text" class="form-control" id="validationCustom03" placeholder="City" required>
		<div class="invalid-feedback">
			Please provide a valid city.
		</div>
		</div>
		<div class="col-md-3 mb-3">
		<label for="validationCustom04">State</label>
		<input type="text" class="form-control" id="validationCustom04" placeholder="State" required>
		<div class="invalid-feedback">
			Please provide a valid state.
		</div>
		</div>
		<div class="col-md-3 mb-3">
		<label for="validationCustom05">Zip</label>
		<input type="text" class="form-control" id="validationCustom05" placeholder="Zip" required>
		<div class="invalid-feedback">
			Please provide a valid zip.
		</div>
		</div>
	</div>
	<div class="form-group">
		<div class="form-check">
		<input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
		<label class="form-check-label" for="invalidCheck">
			Agree to terms and conditions
		</label>
		<div class="invalid-feedback">
			You must agree before submitting.
		</div>
		</div>
	</div>
	<button class="btn btn-primary" type="submit">Submit form</button>
</form>

<script>
	// Example starter JavaScript for disabling form submissions if there are invalid fields
	(function() {
	'use strict';
	window.addEventListener('load', function() {
		// Fetch all the forms we want to apply custom Bootstrap validation styles to
		var forms = document.getElementsByClassName('needs-validation');
		// Loop over them and prevent submission
		var validation = Array.prototype.filter.call(forms, function(form) {
		form.addEventListener('submit', function(event) {
			if (form.checkValidity() === false) {
			event.preventDefault();
			event.stopPropagation();
			}
			form.classList.add('was-validated');
		}, false);
		});
	}, false);
	})();
</script>

Additional form validation styling

<form class="was-validated">
	<div class="mb-3">
		<label for="validationTextarea">Textarea</label>
		<textarea class="form-control is-invalid" id="validationTextarea" placeholder="Required example textarea" required></textarea>
		<div class="invalid-feedback">
		Please enter a message in the textarea.
		</div>
	</div>
	<div class="custom-control custom-checkbox mb-3">
		<input type="checkbox" class="custom-control-input" id="customControlValidation1" required>
		<label class="custom-control-label" for="customControlValidation1">Check this custom checkbox</label>
		<div class="invalid-feedback">Example invalid feedback text</div>
	</div>
	<div class="custom-control custom-radio">
		<input type="radio" class="custom-control-input" id="customControlValidation2" name="radio-stacked" required>
		<label class="custom-control-label" for="customControlValidation2">Toggle this custom radio</label>
	</div>
	<div class="custom-control custom-radio mb-3">
		<input type="radio" class="custom-control-input" id="customControlValidation3" name="radio-stacked" required>
		<label class="custom-control-label" for="customControlValidation3">Or toggle this other custom radio</label>
		<div class="invalid-feedback">More example invalid feedback text</div>
	</div>
	<div class="form-group">
		<select class="custom-select" required aria-label="Select example">
		<option value="">Open this select menu</option>
		<option value="1">One</option>
		<option value="2">Two</option>
		<option value="3">Three</option>
		</select>
		<div class="invalid-feedback">Example invalid custom select feedback</div>
	</div>
	<div class="custom-file">
		<input type="file" class="custom-file-input" id="validatedCustomFile" required>
		<label class="custom-file-label" for="validatedCustomFile">Choose file...</label>
		<div class="invalid-feedback">Example invalid custom file feedback</div>
	</div>
</form>

Form validation with Tooltips

Submit form as-is to see validation messages and styling.

<form class="needs-validation" novalidate>
	<div class="form-row">
		<div class="col-md-4 mb-3">
		<label for="validationTooltip01">First name</label>
		<input type="text" class="form-control" id="validationTooltip01" placeholder="First name" value="Mark" required>
		<div class="valid-tooltip">
			Looks good!
		</div>
		</div>
		<div class="col-md-4 mb-3">
		<label for="validationTooltip02">Last name</label>
		<input type="text" class="form-control" id="validationTooltip02" placeholder="Last name" value="Otto" required>
		<div class="valid-tooltip">
			Looks good!
		</div>
		</div>
		<div class="col-md-4 mb-3">
		<label for="validationTooltipUsername">Username</label>
		<div class="input-group">
			<div class="input-group-prepend">
			<span class="input-group-text" id="validationTooltipUsernamePrepend">@</span>
			</div>
			<input type="text" class="form-control" id="validationTooltipUsername" placeholder="Username" aria-describedby="validationTooltipUsernamePrepend" required>
			<div class="invalid-tooltip">
			Please choose a unique and valid username.
			</div>
		</div>
		</div>
	</div>
	<div class="form-row">
		<div class="col-md-6 mb-3">
		<label for="validationTooltip03">City</label>
		<input type="text" class="form-control" id="validationTooltip03" placeholder="City" required>
		<div class="invalid-tooltip">
			Please provide a valid city.
		</div>
		</div>
		<div class="col-md-3 mb-3">
		<label for="validationTooltip04">State</label>
		<input type="text" class="form-control" id="validationTooltip04" placeholder="State" required>
		<div class="invalid-tooltip">
			Please provide a valid state.
		</div>
		</div>
		<div class="col-md-3 mb-3">
		<label for="validationTooltip05">Zip</label>
		<input type="text" class="form-control" id="validationTooltip05" placeholder="Zip" required>
		<div class="invalid-tooltip">
			Please provide a valid zip.
		</div>
		</div>
	</div>
	<button class="btn btn-primary" type="submit">Submit form</button>
</form>

Jumbotron

See Jumbotrons in the Shortcode Cookbook

List Groups

Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum at eros

<ul class="list-group">
	<li class="list-group-item">Cras justo odio</li>
	<li class="list-group-item">Dapibus ac facilisis in</li>
	<li class="list-group-item">Morbi leo risus</li>
	<li class="list-group-item">Porta ac consectetur ac</li>
	<li class="list-group-item">Vestibulum at eros</li>
</ul>

Active items

Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum at eros

<ul class="list-group">
	<li class="list-group-item active">Cras justo odio</li>
	<li class="list-group-item">Dapibus ac facilisis in</li>
	<li class="list-group-item">Morbi leo risus</li>
	<li class="list-group-item">Porta ac consectetur ac</li>
	<li class="list-group-item">Vestibulum at eros</li>
</ul>

Disabled items

Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum at eros

<ul class="list-group">
	<li class="list-group-item disabled" aria-disabled="true">Cras justo odio</li>
	<li class="list-group-item">Dapibus ac facilisis in</li>
	<li class="list-group-item">Morbi leo risus</li>
	<li class="list-group-item">Porta ac consectetur ac</li>
	<li class="list-group-item">Vestibulum at eros</li>
</ul>

Links and buttons

Cras justo odio

Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum at eros

<div class="list-group">
	<a href="#" class="list-group-item list-group-item-action active">
		Cras justo odio
	</a>
	<a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
	<a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a>
	<a href="#" class="list-group-item list-group-item-action">Porta ac consectetur ac</a>
	<a class="list-group-item list-group-item-action disabled" tabindex="-1">Vestibulum at eros</a>
</div>

Note: “If a link needs to be programmatically communicated as ‘disabled’, remove the href attribute.” – Source: ARIA in HTML

Flush

Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum at eros

<ul class="list-group list-group-flush">
	<li class="list-group-item">Cras justo odio</li>
	<li class="list-group-item">Dapibus ac facilisis in</li>
	<li class="list-group-item">Morbi leo risus</li>
	<li class="list-group-item">Porta ac consectetur ac</li>
	<li class="list-group-item">Vestibulum at eros</li>
</ul>

Horizontal list groups

Cras justo odio
Dapibus ac facilisis in
Morbi leo risus

<ul class="list-group list-group-horizontal">
	<li class="list-group-item">Cras justo odio</li>
	<li class="list-group-item">Dapibus ac facilisis in</li>
	<li class="list-group-item">Morbi leo risus</li>
</ul>

Contextual classes

Dapibus ac facilisis in
A simple primary list group item
A simple secondary list group item
A simple success list group item
A simple danger list group item
A simple warning list group item
A simple info list group item
A simple light list group item
A simple dark list group item

<ul class="list-group">
	<li class="list-group-item">Dapibus ac facilisis in</li>
	<li class="list-group-item list-group-item-primary">A simple primary list group item</li>
	<li class="list-group-item list-group-item-secondary">A simple secondary list group item</li>
	<li class="list-group-item list-group-item-success">A simple success list group item</li>
	<li class="list-group-item list-group-item-danger">A simple danger list group item</li>
	<li class="list-group-item list-group-item-warning">A simple warning list group item</li>
	<li class="list-group-item list-group-item-info">A simple info list group item</li>
	<li class="list-group-item list-group-item-light">A simple light list group item</li>
	<li class="list-group-item list-group-item-dark">A simple dark list group item</li>
</ul>

Dapibus ac facilisis in
A simple primary list group item
A simple secondary list group item
A simple success list group item
A simple danger list group item
A simple warning list group item
A simple info list group item
A simple light list group item
A simple dark list group item

<div class="list-group">
	<a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
	<a href="#" class="list-group-item list-group-item-action list-group-item-primary">A simple primary list group item</a>
	<a href="#" class="list-group-item list-group-item-action list-group-item-secondary">A simple secondary list group item</a>
	<a href="#" class="list-group-item list-group-item-action list-group-item-success">A simple success list group item</a>
	<a href="#" class="list-group-item list-group-item-action list-group-item-danger">A simple danger list group item</a>
	<a href="#" class="list-group-item list-group-item-action list-group-item-warning">A simple warning list group item</a>
	<a href="#" class="list-group-item list-group-item-action list-group-item-info">A simple info list group item</a>
	<a href="#" class="list-group-item list-group-item-action list-group-item-light">A simple light list group item</a>
	<a href="#" class="list-group-item list-group-item-action list-group-item-dark">A simple dark list group item</a>
</div>

List groups with badges

Cras justo odio
14
Dapibus ac facilisis in
2
Morbi leo risus
1

<ul class="list-group">
	<li class="list-group-item d-flex justify-content-between align-items-center">
		Cras justo odio
		<span class="badge badge-primary badge-pill">14</span>
	</li>
	<li class="list-group-item d-flex justify-content-between align-items-center">
		Dapibus ac facilisis in
		<span class="badge badge-primary badge-pill">2</span>
	</li>
	<li class="list-group-item d-flex justify-content-between align-items-center">
		Morbi leo risus
		<span class="badge badge-primary badge-pill">1</span>
	</li>
</ul>

Custom content

List group item heading

3 days ago

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Donec id elit non mi porta.

List group item heading

3 days ago

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Donec id elit non mi porta.

List group item heading

3 days ago

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Donec id elit non mi porta.

<div class="list-group" style="max-width: 400px;">
	<a href="#" class="list-group-item list-group-item-action active">
		<div class="d-flex w-100 justify-content-between">
		<h5 class="mb-1">List group item heading</h5>
		<small>3 days ago</small>
		</div>
		<p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
		<small>Donec id elit non mi porta.</small>
	</a>
	<a href="#" class="list-group-item list-group-item-action">
		<div class="d-flex w-100 justify-content-between">
		<h5 class="mb-1">List group item heading</h5>
		<small class="text-muted">3 days ago</small>
		</div>
		<p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
		<small class="text-muted">Donec id elit non mi porta.</small>
	</a>
	<a href="#" class="list-group-item list-group-item-action">
		<div class="d-flex w-100 justify-content-between">
		<h5 class="mb-1">List group item heading</h5>
		<small class="text-muted">3 days ago</small>
		</div>
		<p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
		<small class="text-muted">Donec id elit non mi porta.</small>
	</a>
</div>

Tabular content

See Tabs (Tours) in the Shortcode Cookbook

Media Objects

Example only - Replace with real alt text!

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

<div class="media">
	<img src="https://placehold.co/64x64" class="mr-3" alt="Example only - Replace with real alt text!">
	<div class="media-body">
		<h5 class="mt-0">Media heading</h5>
		Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
	</div>
</div>

Nesting

Media heading

<div class="media">
	<img src="https://placehold.co/64x64" class="mr-3" alt="Example only - Replace with real alt text!">
	<div class="media-body">
		<h5 class="mt-0">Media heading</h5>
		Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
		<div class="media mt-3">
			<a class="mr-3" href="#">
				<img src="https://placehold.co/64x64" class="mr-3" alt="Example only - Replace with real alt text!">
			</a>
			<div class="media-body">
				<h5 class="mt-0">Media heading</h5>
				Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
			</div>
		</div>
	</div>
</div>

Alignment

Top-aligned media

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

<div class="media">
	<img src="https://placehold.co/64x64" class="align-self-start mr-3" alt="Example only - Replace with real alt text!">
	<div class="media-body">
		<h5 class="mt-0">Top-aligned media</h5>
		<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
		<p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
	</div>
</div>

Center-aligned media

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

<div class="media">
	<img src="https://placehold.co/64x64" class="align-self-center mr-3" alt="Example only - Replace with real alt text!">
	<div class="media-body">
		<h5 class="mt-0">Center-aligned media</h5>
		<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
		<p class="mb-0">Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
	</div>
</div>

Bottom-aligned media

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

<div class="media">
	<img src="https://placehold.co/64x64" class="align-self-end mr-3" alt="Example only - Replace with real alt text!">
	<div class="media-body">
		<h5 class="mt-0">Bottom-aligned media</h5>
		<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
		<p class="mb-0">Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
	</div>
</div>

Media List

List-based media object

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
List-based media object

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
List-based media object

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

<ul class="list-unstyled">
	<li class="media">
		<img src="https://placehold.co/64x64" class="mr-3" alt="Example only - Replace with real alt text!">
		<div class="media-body">
		<h5 class="mt-0 mb-1">List-based media object</h5>
		Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
		</div>
	</li>
	<li class="media my-4">
		<img src="https://placehold.co/64x64" class="mr-3" alt="Example only - Replace with real alt text!">
		<div class="media-body">
		<h5 class="mt-0 mb-1">List-based media object</h5>
		Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
		</div>
	</li>
	<li class="media">
		<img src="https://placehold.co/64x64" class="mr-3" alt="Example only - Replace with real alt text!">
		<div class="media-body">
		<h5 class="mt-0 mb-1">List-based media object</h5>
		Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
		</div>
	</li>
</ul>

Modals

See Modals in the Shortcode Cookbook

Tabs

See Tabs in the Shortcode Cookbook

Pagination

<nav aria-label="Page navigation example">
	<ul class="pagination">
		<li class="page-item"><a class="page-link" href="#">Previous</a></li>
		<li class="page-item"><a class="page-link" href="#">1</a></li>
		<li class="page-item"><a class="page-link" href="#">2</a></li>
		<li class="page-item"><a class="page-link" href="#">3</a></li>
		<li class="page-item"><a class="page-link" href="#">Next</a></li>
	</ul>
</nav>

Disabled and active states

<nav aria-label="...">
	<ul class="pagination">
		<li class="page-item disabled">
		<a class="page-link" tabindex="-1" >Previous</a>
		</li>
		<li class="page-item"><a class="page-link" href="#">1</a></li>
		<li class="page-item active" aria-current="page">
		<a class="page-link" href="#">2 <span class="sr-only">(current)</span></a>
		</li>
		<li class="page-item"><a class="page-link" href="#">3</a></li>
		<li class="page-item">
		<a class="page-link" href="#">Next</a>
		</li>
	</ul>
</nav>

Note: “If a link needs to be programmatically communicated as ‘disabled’, remove the href attribute.” – Source: ARIA in HTML

Center-aligned

<nav aria-label="Page navigation example">
	<ul class="pagination justify-content-center">
		<li class="page-item disabled">
		<a class="page-link" tabindex="-1">Previous</a>
		</li>
		<li class="page-item"><a class="page-link" href="#">1</a></li>
		<li class="page-item"><a class="page-link" href="#">2</a></li>
		<li class="page-item"><a class="page-link" href="#">3</a></li>
		<li class="page-item">
		<a class="page-link" href="#">Next</a>
		</li>
	</ul>
</nav>

Note: “If a link needs to be programmatically communicated as ‘disabled’, remove the href attribute.” – Source: ARIA in HTML

Right-aligned

<nav aria-label="Page navigation example">
	<ul class="pagination justify-content-end">
		<li class="page-item disabled">
		<a class="page-link" tabindex="-1">Previous</a>
		</li>
		<li class="page-item"><a class="page-link" href="#">1</a></li>
		<li class="page-item"><a class="page-link" href="#">2</a></li>
		<li class="page-item"><a class="page-link" href="#">3</a></li>
		<li class="page-item">
		<a class="page-link" href="#">Next</a>
		</li>
	</ul>
</nav>

Note: “If a link needs to be programmatically communicated as ‘disabled’, remove the href attribute.” – Source: ARIA in HTML

Progress

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

With labels

25%

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

Height variants

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

Background colors

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

Multiple bars

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

Striped bars

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

Spinners

Spinners are animated – please use sparingly and cautiously with users with motion sensitivity. These devices do make use of prefers-reduced-motion media query.

<div class="spinner-border" role="status">
	<span class="sr-only">Loading...</span>
</div>

Colors

<div class="spinner-border text-primary" role="status">
	<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-secondary" role="status">
	<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-success" role="status">
	<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-danger" role="status">
	<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-warning" role="status">
	<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-info" role="status">
	<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-light" role="status">
	<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-dark" role="status">
	<span class="sr-only">Loading...</span>
</div>

Growing spinner

<div class="spinner-grow" role="status">
	<span class="sr-only">Loading...</span>
</div>

Colors

<div class="spinner-grow text-primary" role="status">
	<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-secondary" role="status">
	<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-success" role="status">
	<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-danger" role="status">
	<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-warning" role="status">
	<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-info" role="status">
	<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-light" role="status">
	<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-dark" role="status">
	<span class="sr-only">Loading...</span>
</div>

Tooltips

<p><button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button></p>
<p><button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button></p>
<p><button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button></p>
<p><button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button></p>

Tooltips on links (hover to see)

Tight pants next level keffiyeh you probably haven’t heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney’s fixie sustainable quinoa 8-bit american apparel have a terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney’s cleanse vegan chambray. A really ironic artisan whatever keytar, scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral.

<p class="muted">Tight pants next level keffiyeh <a href="#" data-toggle="tooltip" title="" data-original-title="Default tooltip">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" data-toggle="tooltip" title="" data-original-title="Another tooltip">have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan <a href="#" data-toggle="tooltip" title="" data-original-title="Another one here too">whatever keytar</a>, scenester farm-to-table banksy Austin <a href="#" data-toggle="tooltip" title="The last tip!">twitter handle</a> freegan cred raw denim single-origin coffee viral.
</p>