easydevtuts/grid.html

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