moiz-frost · August 10, 2017 16:58
diff --git a/grid.html b/grid.html
 <!doctype html>
 <html lang="en">
 <head>
 	<meta charset="UTF-8">
 	<title>Bootstrap 3.0 Grid System</title>
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
 	<style>
 		body{
 			background-color: black;
 		}
 		.col-xs-12{
 			height: 100px;
 			background-color: blue;
 			color: white;
 			text-align: center;
 		}
 		.col-xs-6{
 			height: 100px;
 			background-color: yellow;
 			color: black;
 			text-align: center;
 			border: 2px solid black;
 		}
 		.col-xs-4{
 			height: 100px;
 			background-color: green;
 			color: white;
 			text-align: center;
 			border: 2px solid black;
 		}
 		.col-xs-8{
 			height: 100px;
 			background-color: red;
 			color: black;
 			text-align: center;
 			border: 2px solid black;
 		}
 		.footer .col-sm-4{
 			height: 100px;
 			background-color: purple;
 			color: white;
 			text-align: center;
 			border: 2px solid black;
 		}
 	</style>
 </head>
 <body>

 <!-- 	Grid Classes: 
 		    .container: wrapper for all your rows
 		    .row: contains all your column classes
 		    .col-##-##: the sizes of the columns in your row (xs,sm,md,lg)
 			
 			Ordering Classes (only for md & lg screens):
 				  .col-##-push-##: Pushes your columns
 				  .col-##-pull-##: Pulls your columns

 			Offset Class (only for md & lg screens):
 				  .col-##-offset-##: moves your columns depending what the column is offset by

 			Responsive Utility Classes: They hide and show content on your screen depending on which you device style for.

 				   .visible-##: Your content will only be visible on that screen size.
 				   .hidden-##: Your content will only be hidden on that screen size.


 -->

 		<div class="container">
 			
 			<div class="row">
 				
 				<div class="col-xs-12">
 					
 					<h1 class="visible-xs">Extra small screens</h1>
 					<h1 class="visible-sm">Small screens</h1>
 					<h1 class="visible-md">Medium Screen</h1>
 					<h1 class="visible-lg">Large screens</h1>

 				</div>

 			</div>

 			<div class="row">
 				
 				<div class="col-xs-6 col-lg-4">
 					.col-xs-6
 				</div>
 				<div class="col-xs-6 col-lg-8">
 					.col-xs-8
 				</div>

 			</div>

 			<div class="row hidden-xs">
 				
 				<div class="col-sm-6">
 					
 					<div class="row">
 						
 						<div class="col-xs-4">
 							col-xs-4
 						</div>
 						<div class="col-xs-8">
 							col-xs-8
 						</div>

 					</div>
 				
 				</div>

 				<div class="col-sm-6">
 					
 					<div class="row">
 						
 						<div class="col-xs-4 col-md-push-8">
 							col-xs-4
 						</div>
 						<div class="col-xs-8 col-md-pull-4">
 							col-xs-8
 						</div>

 					</div>
 				
 				</div>

 			</div>

 			<div class="row footer">
 					
 				<div class="col-sm-4">
 					col-sm-4
 				</div>
 				<div class="col-sm-4">
 					col-sm-4
 				</div>
 				<div class="col-sm-4">
 					col-sm-4
 				</div>

 			</div>

 			<div class="row">
 				<div class="col-md-4 col-md-offset-8 panel">
 					Find easydevtuts on social media
 				</div>
 			</div>

 		</div>

 </body>
 </html>
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Bootstrap 3.0 Grid System</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<!-- Latest compiled and minified CSS -->
	<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
	<style>
	body{
	background-color: black;
	}
	.col-xs-12{
	height: 100px;
	background-color: blue;
	color: white;
	text-align: center;
	}
	.col-xs-6{
	height: 100px;
	background-color: yellow;
	color: black;
	text-align: center;
	border: 2px solid black;
	}
	.col-xs-4{
	height: 100px;
	background-color: green;
	color: white;
	text-align: center;
	border: 2px solid black;
	}
	.col-xs-8{
	height: 100px;
	background-color: red;
	color: black;
	text-align: center;
	border: 2px solid black;
	}
	.footer .col-sm-4{
	height: 100px;
	background-color: purple;
	color: white;
	text-align: center;
	border: 2px solid black;
	}
	</style>
	</head>
	<body>

	<!-- Grid Classes:
	.container: wrapper for all your rows
	.row: contains all your column classes
	.col-##-##: the sizes of the columns in your row (xs,sm,md,lg)

	Ordering Classes (only for md & lg screens):
	.col-##-push-##: Pushes your columns
	.col-##-pull-##: Pulls your columns

	Offset Class (only for md & lg screens):
	.col-##-offset-##: moves your columns depending what the column is offset by

	Responsive Utility Classes: They hide and show content on your screen depending on which you device style for.

	.visible-##: Your content will only be visible on that screen size.
	.hidden-##: Your content will only be hidden on that screen size.


	-->

	<div class="container">

	<div class="row">

	<div class="col-xs-12">

	<h1 class="visible-xs">Extra small screens</h1>
	<h1 class="visible-sm">Small screens</h1>
	<h1 class="visible-md">Medium Screen</h1>
	<h1 class="visible-lg">Large screens</h1>

	</div>

	</div>

	<div class="row">

	<div class="col-xs-6 col-lg-4">
	.col-xs-6
	</div>
	<div class="col-xs-6 col-lg-8">
	.col-xs-8
	</div>

	</div>

	<div class="row hidden-xs">

	<div class="col-sm-6">

	<div class="row">

	<div class="col-xs-4">
	col-xs-4
	</div>
	<div class="col-xs-8">
	col-xs-8
	</div>

	</div>

	</div>

	<div class="col-sm-6">

	<div class="row">

	<div class="col-xs-4 col-md-push-8">
	col-xs-4
	</div>
	<div class="col-xs-8 col-md-pull-4">
	col-xs-8
	</div>

	</div>

	</div>

	</div>

	<div class="row footer">

	<div class="col-sm-4">
	col-sm-4
	</div>
	<div class="col-sm-4">
	col-sm-4
	</div>
	<div class="col-sm-4">
	col-sm-4
	</div>

	</div>

	<div class="row">
	<div class="col-md-4 col-md-offset-8 panel">
	Find easydevtuts on social media
	</div>
	</div>

	</div>

	</body>
	</html>