This page contains common and unique snippets and classes. They are grouped into one page for easier access.

Many styles and classes are taken from Bootstrap v4. You can view the Bootstrap website for additional information.

Padding / Margin
To add padding or margin to an element, add the p-x or m-x class. The amount ranges from 0 - 20 
<div class="p-6">4rem (40px) padding in all directions</div>
<div class="m-6">4rem (40px) margin in all directions</div>

To change the direction, use the pt,pr,pb,pl,mt,mr,mb,ml-x classes. 
<div class="pt-6">4rem (40px) padding on top</div>
<div class="mb-6">4rem (40px) margin on bottom</div>

Add multiple classes to control multiple directions. 
<div class="pt-5 mr-5">3rem (30px) padding on top and margin on right</div>
<div class="my-3">1rem (10px) margin on top and bottom</div>

<div class="px-6">4rem (40px) padding on left and right</div>

Alignment
To align text to the right, add the text-right class 
<div class="text-right">Text aligned to the right</div>

To align text to the left, add the text-left class 
<div class="text-left">Text aligned to the left</div>

To align text in the center, add the text-center class 
<div class="text-center">Text aligned in the center</div>

Text
To make text slightly bigger and stand out, add the lead class 
<div class="lead">Text will stand out to provide more emphasis</div>

To display any text as a heading style, add one of the following classes 
<div class="h1">H1 heading</div>

<div class="h2">H2 heading</div>

<div class="h3">H3 heading</div>

<div class="h4">H4 heading</div>

<div class="h5">H5 heading</div>

<div class="h6">H6 heading</div>

Responsive Video
To make embedded videos responsive, add the video-responsive class 
<div class="video-responsive">
	<iframe width="560" height="315" src="https://www.youtube.com/embed/Y4MdvqTTe9s?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0"></iframe>
</div>


Tables
To add stripes to table rows, add the table-striped class 
<table class="table table-striped">
	...
</table>
ID Product Category Price Shipping
10052510 Lorem Ipsum Merol $10.99 Free Shipping
10044011 Lorem Ipsum Muspi $11.99 $1.00 Shipping
10033909 Lorem Ipsum Spime $9.99 Free Shipping

To make table rows highlight when hovering, add the table-hover class 
<table class="table table-hover">
	...
</table>
ID Product Category Price Shipping
10052510 Lorem Ipsum Merol $10.99 Free Shipping
10044011 Lorem Ipsum Muspi $11.99 $1.00 Shipping
10033909 Lorem Ipsum Spime $9.99 Free Shipping

To make tables responsive, choose from the options below. Reduce browser size to see the changes.

To keep the table in its original form, add the table-responsive class 
<div class="table-responsive">
	<table class="table">
		...
	</table>
</div>
ID Product Category Price Shipping
10052510 Lorem Ipsum Merol $10.99 Free Shipping
10044011 Lorem Ipsum Muspi $11.99 $1.00 Shipping
10033909 Lorem Ipsum Spime $9.99 Free Shipping

To make the table responsive by stacking columns, add the responsive__table class 
<table class="table responsive__table">
	...
</table>
ID Product Category Price Shipping
10052510 Lorem Ipsum Merol $10.99 Free Shipping
10044011 Lorem Ipsum Muspi $11.99 $1.00 Shipping
10033909 Lorem Ipsum Spime $9.99 Free Shipping

To make the table responsive by stacking columns and show table headings, add the responsive__table2 class
For this to work, the table needs to be properly formatted. It must include a thead and tbody. See example below. 
<table class="table responsive__table2">
	<thead>
		<tr>
			<th>ID</th>
			<th>Product</th>
			<th>Category</th>
			<th>Price</th>
			<th>Shipping</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>10052510</td>
			<td>Lorem Ipsum</td>
			<td>Merol</td>
			<td>$10.99</td>
			<td>Free Shipping</td>
		</tr>
		...
	</tbody>
</table>
ID Product Category Price Shipping
10052510 Lorem Ipsum Merol $10.99 Free Shipping
10044011 Lorem Ipsum Muspi $11.99 $1.00 Shipping
10033909 Lorem Ipsum Spime $9.99 Free Shipping