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 
4rem (40px) padding in all directions
4rem (40px) margin in all directions

To change the direction, use the pt,pr,pb,pl,mt,mr,mb,ml-x classes. 
4rem (40px) padding on top
4rem (40px) margin on bottom

Add multiple classes to control multiple directions. 
3rem (30px) padding on top and margin on right
1rem (10px) margin on top and bottom

4rem (40px) padding on left and right

Alignment
To align text to the right, add the text-right class 
Text aligned to the right

To align text to the left, add the text-left class 
Text aligned to the left

To align text in the center, add the text-center class 
Text aligned in the center

Text
To make text slightly bigger and stand out, add the lead class 
Text will stand out to provide more emphasis

To display any text as a heading style, add one of the following classes 
H1 heading

H2 heading

H3 heading

H4 heading

H5 heading

H6 heading

Responsive Video
To make embedded videos responsive, add the video-responsive class


Tables
To add stripes to table rows, add the table-striped class 

	...
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 

	...
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 

	
		...
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 

	...
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. 

		...
	

	
		

			ID
			Product
			Category
			Price
			Shipping
		

	
	
		

			10052510
			Lorem Ipsum
			Merol
			$10.99
			Free Shipping
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