<div class="row justify-content-center text-center pb-3">
		<div class="col-9">
			<h2>Tables</h2>
			<p>Documentation and examples for opt-in styling of tables (given their prevalent use in JavaScript plugins) with Bootstrap.</p>
		</div>
	</div>

	<!-- Tables -->
	<table class="table">
		<thead>
			<tr>
				<th scope="col">#</th>
				<th scope="col">First</th>
				<th scope="col">Last</th>
				<th scope="col">Handle</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 head options -->
	<div class="row justify-content-center text-center pb-3">
		<div class="col-9">
			<h2>Table head options</h2>
			<p>Similar to tables and dark tables, use the modifier classes
				<code class="highlighter-rouge">.thead-dark</code> to make s appear dark gray.</p>
		</div>
	</div>

	<table class="table">
		<thead class="thead-dark">
			<tr>
				<th scope="col">#</th>
				<th scope="col">First</th>
				<th scope="col">Last</th>
				<th scope="col">Handle</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 head options -->
	<div class="row justify-content-center text-center pb-3">
		<div class="col-9">
			<h2>Table head options</h2>
			<p>Similar to tables and dark tables, use the modifier classes
				<code class="highlighter-rouge">.thead-light</code> to make s appear light gray.</p>
		</div>
	</div>

	<table class="table">
		<thead class="thead-light">
			<tr>
				<th scope="col">#</th>
				<th scope="col">First</th>
				<th scope="col">Last</th>
				<th scope="col">Handle</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>

	<!-- Striped rows -->
	<div class="row justify-content-center text-center pb-3">
		<div class="col-9">
			<h2>Striped rows</h2>
			<p>Use
				<code class="highlighter-rouge">.table-striped</code> to add zebra-striping to any table row within the
				<code class="highlighter-rouge">&lt;tbody&gt;</code>.</p>
		</div>
	</div>

	<table class="table table-striped">
		<thead>
			<tr>
				<th scope="col">#</th>
				<th scope="col">First</th>
				<th scope="col">Last</th>
				<th scope="col">Handle</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>

	<!-- Bordered table -->
	<div class="row justify-content-center text-center pb-3">
		<div class="col-9">
			<h2>Bordered table</h2>
			<p>Add
				<code class="highlighter-rouge">.table-bordered</code> for borders on all sides of the table and cells.</p>
		</div>
	</div>

	<table class="table table-bordered">
		<thead>
			<tr>
				<th scope="col">#</th>
				<th scope="col">First</th>
				<th scope="col">Last</th>
				<th scope="col">Handle</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 colspan="2">Larry the Bird</td>
				<td>@twitter</td>
			</tr>
		</tbody>
	</table>

	<!-- Borderless table -->
	<div class="row justify-content-center text-center pb-3">
		<div class="col-9">
			<h2>Borderless table</h2>
			<p>Add
				<code class="highlighter-rouge">.table-borderless</code> for a table without borders.</p>
		</div>
	</div>

	<table class="table table-borderless">
		<thead>
			<tr>
				<th scope="col">#</th>
				<th scope="col">First</th>
				<th scope="col">Last</th>
				<th scope="col">Handle</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 colspan="2">Larry the Bird</td>
				<td>@twitter</td>
			</tr>
		</tbody>
	</table>

	<div class="row justify-content-center text-center pb-3">
		<div class="col-9">
			<h2>Hoverable rows</h2>
			<p>Add
				<code class="highlighter-rouge">.table-hover</code> to enable a hover state on table rows within a
				<code class="highlighter-rouge">&lt;tbody&gt;</code>.</p>
		</div>
	</div>
	<table class="table table-hover">
		<thead>
			<tr>
				<th scope="col">#</th>
				<th scope="col">First</th>
				<th scope="col">Last</th>
				<th scope="col">Handle</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 colspan="2">Larry the Bird</td>
				<td>@twitter</td>
			</tr>
		</tbody>
	</table>

	<!-- Contextual classes -->
	<div class="row justify-content-center text-center pb-3">
		<div class="col-9">
			<h2>Contextual classes</h2>
			<p>Use contextual classes to color table rows or individual cells.</p>
		</div>
	</div>

	<table class="table">
		<thead>
			<tr>
				<th scope="col">#</th>
				<th scope="col">Class</th>
				<th scope="col">Heading</th>
				<th scope="col">Heading</th>
			</tr>
		</thead>
		<tbody>
			<tr class="table-active">
				<th scope="row">1</th>
				<td>Active</td>
				<td>Cell</td>
				<td>Cell</td>
			</tr>
			<tr>
				<th scope="row">2</th>
				<td>Default</td>
				<td>Cell</td>
				<td>Cell</td>
			</tr>
			<tr class="table-primary">
				<th scope="row">3</th>
				<td>Primary</td>
				<td>Cell</td>
				<td>Cell</td>
			</tr>
			<tr class="table-secondary">
				<th scope="row">4</th>
				<td>Secondary</td>
				<td>Cell</td>
				<td>Cell</td>
			</tr>
			<tr class="table-success">
				<th scope="row">5</th>
				<td>Success</td>
				<td>Cell</td>
				<td>Cell</td>
			</tr>
			<tr class="table-danger">
				<th scope="row">6</th>
				<td>Danger</td>
				<td class="table-primary">Cell</td>
				<td>Cell</td>
			</tr>
			<tr class="table-warning">
				<th scope="row">7</th>
				<td>Warning</td>
				<td>Cell</td>
				<td>Cell</td>
			</tr>
			<tr class="table-info">
				<th scope="row">8</th>
				<td>Info</td>
				<td>Cell</td>
				<td>Cell</td>
			</tr>
			<tr class="table-light">
				<th scope="row">9</th>
				<td>Light</td>
				<td>Cell</td>
				<td>Cell</td>
			</tr>
			<tr class="table-dark">
				<th scope="row">10</th>
				<td>Dark</td>
				<td>Cell</td>
				<td>Cell</td>
			</tr>
		</tbody>
	</table>