---
title: All elements
layout: default
---
<div class="container">
	<div class="card">
		<div class="card-body">
			<h1>h1. Bootstrap heading</h1>
			<h2>h2. Bootstrap heading</h2>
			<h3>h3. Bootstrap heading</h3>
			<h4>h4. Bootstrap heading</h4>
			<h5>h5. Bootstrap heading</h5>
			<h6>h6. Bootstrap heading</h6>

			<h3>
				Fancy display heading
				<small class="text-muted">With faded secondary text</small>
			</h3>

			<h1 class="display-1">Display 1</h1>
			<h1 class="display-2">Display 2</h1>
			<h1 class="display-3">Display 3</h1>
			<h1 class="display-4">Display 4</h1>

			<p class="lead">
				Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
			</p>

			<p>You can use the mark tag to
				<mark>highlight</mark>
				text.
			</p>
			<p>
				<del>This line of text is meant to be treated as deleted text.</del>
			</p>
			<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
			<p>
				<ins>This line of text is meant to be treated as an addition to the document.</ins>
			</p>
			<p><u>This line of text will render as underlined</u></p>
			<p>
				<small>This line of text is meant to be treated as fine print.</small>
			</p>
			<p><strong>This line rendered as bold text.</strong></p>
			<p><em>This line rendered as italicized text.</em></p>

			<blockquote class="blockquote">
				<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
			</blockquote>

			<blockquote class="blockquote">
				<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
				<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
			</blockquote>


			<ul class="list-unstyled">
				<li>Lorem ipsum dolor sit amet</li>
				<li>Consectetur adipiscing elit</li>
				<li>Integer molestie lorem at massa</li>
				<li>Facilisis in pretium nisl aliquet</li>
				<li>Nulla volutpat aliquam velit
					<ul>
						<li>Phasellus iaculis neque</li>
						<li>Purus sodales ultricies</li>
						<li>Vestibulum laoreet porttitor sem</li>
						<li>Ac tristique libero volutpat at</li>
					</ul>
				</li>
				<li>Faucibus porta lacus fringilla vel</li>
				<li>Aenean sit amet erat nunc</li>
				<li>Eget porttitor lorem</li>
			</ul>

			<dl class="row">
				<dt class="col-sm-3">Description lists</dt>
				<dd class="col-sm-9">A description list is perfect for defining terms.</dd>

				<dt class="col-sm-3">Euismod</dt>
				<dd class="col-sm-9">
					<p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</p>
					<p>Donec id elit non mi porta gravida at eget metus.</p>
				</dd>

				<dt class="col-sm-3">Malesuada porta</dt>
				<dd class="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>

				<dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
				<dd class="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>

				<dt class="col-sm-3">Nesting</dt>
				<dd class="col-sm-9">
					<dl class="row">
						<dt class="col-sm-4">Nested definition list</dt>
						<dd class="col-sm-8">Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</dd>
					</dl>
				</dd>
			</dl>

			<p>For example, <code>&lt;section&gt;</code> should be wrapped as inline.</p>

			<pre><code>&lt;p&gt;Sample text here...&lt;/p&gt;
&lt;p&gt;And another line of sample text here...&lt;/p&gt;
</code></pre>

			<p>
				<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
			</p>

			<p>
				To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
				To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>
			</p>

			<p>
				<samp>This text is meant to be treated as sample output from a computer program.</samp>
			</p>

			<table class="table">
				<thead>
				<tr>
					<th>#</th>
					<th>First Name</th>
					<th>Last Name</th>
					<th>Username</th>
				</tr>
				</thead>
				<tbody>
				<tr>
					<th scope="row">1</th>
					<td>Mark</td>
					<td>Otto</td>
					<td>@mdo</td>
				</tr>
				<tr>
					<th scope="row">2</th>
					<td>Jacob</td>
					<td>Thornton</td>
					<td>@fat</td>
				</tr>
				<tr>
					<th scope="row">3</th>
					<td>Larry</td>
					<td>the Bird</td>
					<td>@twitter</td>
				</tr>
				</tbody>
			</table>

			<table class="table table-striped">
				<thead>
				<tr>
					<th>#</th>
					<th>First Name</th>
					<th>Last Name</th>
					<th>Username</th>
				</tr>
				</thead>
				<tbody>
				<tr>
					<th scope="row">1</th>
					<td>Mark</td>
					<td>Otto</td>
					<td>@mdo</td>
				</tr>
				<tr>
					<th scope="row">2</th>
					<td>Jacob</td>
					<td>Thornton</td>
					<td>@fat</td>
				</tr>
				<tr>
					<th scope="row">3</th>
					<td>Larry</td>
					<td>the Bird</td>
					<td>@twitter</td>
				</tr>
				</tbody>
			</table>

			<figure class="figure">
				<img src="https://placehold.it/400x300" class="figure-img img-fluid rounded" alt="A generic square placeholder image with rounded corners in a figure.">
				<figcaption class="figure-caption">A caption for the above image.</figcaption>
			</figure>

			<div class="alert alert-primary" role="alert">
				This is a primary alert with <a href="javascript:void(0)" class="alert-link">an example link</a>. Give it a click if you like.
			</div>
			<div class="alert alert-secondary" role="alert">
				This is a secondary alert with <a href="javascript:void(0)" class="alert-link">an example link</a>. Give it a click if you like.
			</div>
			<div class="alert alert-success" role="alert">
				This is a success alert with <a href="javascript:void(0)" class="alert-link">an example link</a>. Give it a click if you like.
			</div>
			<div class="alert alert-danger" role="alert">
				This is a danger alert with <a href="javascript:void(0)" class="alert-link">an example link</a>. Give it a click if you like.
			</div>
			<div class="alert alert-warning" role="alert">
				This is a warning alert with <a href="javascript:void(0)" class="alert-link">an example link</a>. Give it a click if you like.
			</div>
			<div class="alert alert-info" role="alert">
				This is a info alert with <a href="javascript:void(0)" class="alert-link">an example link</a>. Give it a click if you like.
			</div>
			<div class="alert alert-light" role="alert">
				This is a light alert with <a href="javascript:void(0)" class="alert-link">an example link</a>. Give it a click if you like.
			</div>
			<div class="alert alert-dark" role="alert">
				This is a dark alert with <a href="javascript:void(0)" class="alert-link">an example link</a>. Give it a click if you like.
			</div>

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

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

			<p>
				<button class="btn">
					Profile <span class="badge badge-default">9</span>
					<span class="sr-only">unread messages</span>
				</button>
			</p>

			<p>
				<span class="badge badge-primary">Primary</span>
				<span class="badge badge-default">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>
			</p>

			<p>
				<span class="badge badge-pill badge-primary">Primary</span>
				<span class="badge badge-pill badge-default">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>
			</p>

			<p>
				<a href="javascript:void(0)" class="badge badge-primary">Primary</a>
				<a href="javascript:void(0)" class="badge badge-default">Secondary</a>
				<a href="javascript:void(0)" class="badge badge-success">Success</a>
				<a href="javascript:void(0)" class="badge badge-danger">Danger</a>
				<a href="javascript:void(0)" class="badge badge-warning">Warning</a>
				<a href="javascript:void(0)" class="badge badge-info">Info</a>
				<a href="javascript:void(0)" class="badge badge-light">Light</a>
				<a href="javascript:void(0)" class="badge badge-dark">Dark</a>
			</p>

			<ol class="breadcrumb">
				<li class="breadcrumb-item active">Home</li>
			</ol>
			<ol class="breadcrumb">
				<li class="breadcrumb-item"><a href="javascript:void(0)">Home</a></li>
				<li class="breadcrumb-item active">Library</li>
			</ol>
			<ol class="breadcrumb">
				<li class="breadcrumb-item"><a href="javascript:void(0)">Home</a></li>
				<li class="breadcrumb-item"><a href="javascript:void(0)">Library</a></li>
				<li class="breadcrumb-item active">Data</li>
			</ol>

			<nav class="breadcrumb">
				<a class="breadcrumb-item" href="javascript:void(0)">Home</a>
				<a class="breadcrumb-item" href="javascript:void(0)">Library</a>
				<a class="breadcrumb-item" href="javascript:void(0)">Data</a>
				<span class="breadcrumb-item active">Bootstrap</span>
			</nav>

			<p>
				<button type="button" class="btn btn-primary">Primary</button>
				<button type="button" class="btn btn-secondary">Secondary</button>
				<button type="button" class="btn btn-success">Success</button>
				<button type="button" class="btn btn-danger">Danger</button>
				<button type="button" class="btn btn-warning">Warning</button>
				<button type="button" class="btn btn-info">Info</button>
				<button type="button" class="btn btn-light">Light</button>
				<button type="button" class="btn btn-dark">Dark</button>

				<button type="button" class="btn btn-link">Link</button>
			</p>

			<p>
				<a class="btn btn-primary" href="javascript:void(0)" role="button">Link</a>
				<button class="btn btn-primary" type="submit">Button</button>
				<input class="btn btn-primary" type="button" value="Input">
				<input class="btn btn-primary" type="submit" value="Submit">
				<input class="btn btn-primary" type="reset" value="Reset">
			</p>

			<p>
				<button type="button" class="btn btn-outline-primary">Primary</button>
				<button type="button" class="btn btn-outline-secondary">Secondary</button>
				<button type="button" class="btn btn-outline-success">Success</button>
				<button type="button" class="btn btn-outline-danger">Danger</button>
				<button type="button" class="btn btn-outline-warning">Warning</button>
				<button type="button" class="btn btn-outline-info">Info</button>
				<button type="button" class="btn btn-outline-light">Light</button>
				<button type="button" class="btn btn-outline-dark">Dark</button>
			</p>

			<div class="btn-group" role="group" aria-label="Basic example">
				<button type="button" class="btn btn-secondary">Left</button>
				<button type="button" class="btn btn-secondary">Middle</button>
				<button type="button" class="btn btn-secondary">Right</button>
			</div>

			<div class="card my-4" style="width: 20rem;">
				<img class="card-img-top" src="https://placehold.it/318x180" alt="Card image cap">
				<div class="card-body">
					<h4 class="card-title">Card title</h4>
					<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
					<a href="javascript:void(0)" class="btn btn-primary">Go somewhere</a>
				</div>
			</div>

			<div class="card my-4">
				<div class="card-body">
					This is some text within a card block.
				</div>
			</div>

			<div class="row my-4">
				<div class="col-sm-6">
					<div class="card">
						<div class="card-body">
							<h4 class="card-title">Special title treatment</h4>
							<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
							<a href="javascript:void(0)" class="btn btn-primary">Go somewhere</a>
						</div>
					</div>
				</div>
				<div class="col-sm-6">
					<div class="card">
						<div class="card-body">
							<h4 class="card-title">Special title treatment</h4>
							<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
							<a href="javascript:void(0)" class="btn btn-primary">Go somewhere</a>
						</div>
					</div>
				</div>
			</div>

			<div class="card text-center my-4">
				<div class="card-header">
					<ul class="nav nav-tabs card-header-tabs">
						<li class="nav-item">
							<a class="nav-link active" href="javascript:void(0)">Active</a>
						</li>
						<li class="nav-item">
							<a class="nav-link" href="javascript:void(0)">Link</a>
						</li>
						<li class="nav-item">
							<a class="nav-link disabled" href="javascript:void(0)">Disabled</a>
						</li>
					</ul>
				</div>
				<div class="card-body">
					<h4 class="card-title">Special title treatment</h4>
					<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
					<a href="javascript:void(0)" class="btn btn-primary">Go somewhere</a>
				</div>
			</div>

			<div class="card text-white bg-primary mb-3" style="max-width: 20rem;">
				<div class="card-header">Header</div>
				<div class="card-body">
					<h4 class="card-title">Primary card title</h4>
					<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
				</div>
			</div>
			<div class="card text-white bg-secondary mb-3" style="max-width: 20rem;">
				<div class="card-header">Header</div>
				<div class="card-body">
					<h4 class="card-title">Secondary card title</h4>
					<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
				</div>
			</div>
			<div class="card text-white bg-success mb-3" style="max-width: 20rem;">
				<div class="card-header">Header</div>
				<div class="card-body">
					<h4 class="card-title">Success card title</h4>
					<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
				</div>
			</div>
			<div class="card text-white bg-danger mb-3" style="max-width: 20rem;">
				<div class="card-header">Header</div>
				<div class="card-body">
					<h4 class="card-title">Danger card title</h4>
					<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
				</div>
			</div>
			<div class="card text-white bg-warning mb-3" style="max-width: 20rem;">
				<div class="card-header">Header</div>
				<div class="card-body">
					<h4 class="card-title">Warning card title</h4>
					<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
				</div>
			</div>
			<div class="card text-white bg-info mb-3" style="max-width: 20rem;">
				<div class="card-header">Header</div>
				<div class="card-body">
					<h4 class="card-title">Info card title</h4>
					<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
				</div>
			</div>
			<div class="card bg-light mb-3" style="max-width: 20rem;">
				<div class="card-header">Header</div>
				<div class="card-body">
					<h4 class="card-title">Light card title</h4>
					<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
				</div>
			</div>
			<div class="card text-white bg-dark mb-3" style="max-width: 20rem;">
				<div class="card-header">Header</div>
				<div class="card-body">
					<h4 class="card-title">Dark card title</h4>
					<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
				</div>
			</div>

			<div class="card-deck">
				<div class="card">
					<img class="card-img-top" src="https://placehold.it/318x180" alt="Card image cap">
					<div class="card-body">
						<h4 class="card-title">Card title</h4>
						<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit
							longer.</p>
						<p class="card-text">
							<small class="text-muted">Last updated 3 mins ago</small>
						</p>
					</div>
				</div>
				<div class="card">
					<img class="card-img-top" src="https://placehold.it/318x180" alt="Card image cap">
					<div class="card-body">
						<h4 class="card-title">Card title</h4>
						<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
						<p class="card-text">
							<small class="text-muted">Last updated 3 mins ago</small>
						</p>
					</div>
				</div>
				<div class="card">
					<img class="card-img-top" src="https://placehold.it/318x180" alt="Card image cap">
					<div class="card-body">
						<h4 class="card-title">Card title</h4>
						<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer
							content than the first to show that equal height action.</p>
						<p class="card-text">
							<small class="text-muted">Last updated 3 mins ago</small>
						</p>
					</div>
				</div>
			</div>

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

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

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

			<div class="my-4">
				<div class="dropdown">
					<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true"
							aria-expanded="false">
						Dropdown button
					</button>
					<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
						<a class="dropdown-item" href="javascript:void(0)">Action</a>
						<a class="dropdown-item" href="javascript:void(0)">Another action</a>
						<a class="dropdown-item" href="javascript:void(0)">Something else here</a>
					</div>
				</div>
			</div>

			<div class="my-4">
				<div class="btn-group">
					<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
						Action
					</button>
					<div class="dropdown-menu">
						<a class="dropdown-item" href="javascript:void(0)">Action</a>
						<a class="dropdown-item" href="javascript:void(0)">Another action</a>
						<a class="dropdown-item" href="javascript:void(0)">Something else here</a>
						<div class="dropdown-divider"></div>
						<a class="dropdown-item" href="javascript:void(0)">Separated link</a>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>