A Pen by Ellyria

Thumbnail
This awesome code was written by Ellyria, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Ellyria ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Ellyria</title>
  		<meta charset="UTF-8">
		<!-- Support for older (IE9 or older) Microsoft browsers: -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<!-- Automatically scale contents to viewport size and orientation: -->
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<title>Bootstrap Container Behavior</title>
		<!-- Bootstrap CSS: -->
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
		<link rel="stylesheet" href="../bootstrap.min.css"/>
		<!-- Bootstrap CSS optional theme: -->
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
		<link rel="stylesheet" href="../bootstrap-theme.min.css"/>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
	<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
	<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->

  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <h1 class="text-center">Bootstrap Container Behavior</h1>

<div class="bg-primary container" id="introduction">
	<p>
		Each example below contains two mini-examples. The code for each mini-example is identical except for the container type. Each example set is displayed in a different colored container so that you can keep track of which set you're comparing when resizing the browser window to see the difference in behavior. I recommend slowly resizing the window and looking back and forth, because some of the differences are very subtle, but could really matter when it comes to making a decision on which to use for your page or application.
		<br><br>
		Note that, when the <strong>container</strong> class is used, the browser adds white space around a row to control automatic scaling of contents to the viewport size and orientation.
		<br><br>
		Note that, when the <strong>container-fluid</strong> class is used, the browser does not add white space around a row to control automatic scaling of contents to the viewport size and orientation.
		<br><br>
		Instructions on using the Bootstrap grid are at the bottom of this page.
	</p>
</div>

<!-- EXAMPLE 1 -->
<h2 class="text-center">Example 1 - .container</h2>
<section class="container example1">
	<section class="row">
		<p class="col-xs-4">.col-xs-4</p>
		<p class="col-xs-4">.col-xs-4</p>
		<p class="col-xs-4">.col-xs-4</p>
	</section>
	<section class="row">
		<p class="col-sm-4">.col-sm-4</p>
		<p class="col-sm-4">.col-sm-4</p>
		<p class="col-sm-4">.col-sm-4</p>
	</section>
	<section class="row">
		<p class="col-md-4">.col-md-4</p>
		<p class="col-md-4">.col-md-4</p>
		<p class="col-md-4">.col-md-4</p>
	</section>
	<section class="row">
		<p class="col-lg-4">.col-lg-4</p>
		<p class="col-lg-4">.col-lg-4</p>
		<p class="col-lg-4">.col-lg-4</p>
	</section>
</section>

<h2 class="text-center">Example 1 - .container-fluid</h2>
<section class="container-fluid example1">
	<section class="row">
		<p class="col-xs-4">.col-xs-4</p>
		<p class="col-xs-4">.col-xs-4</p>
		<p class="col-xs-4">.col-xs-4</p>
	</section>
	<section class="row">
		<p class="col-sm-4">.col-sm-4</p>
		<p class="col-sm-4">.col-sm-4</p>
		<p class="col-sm-4">.col-sm-4</p>
	</section>
	<section class="row">
		<p class="col-md-4">.col-md-4</p>
		<p class="col-md-4">.col-md-4</p>
		<p class="col-md-4">.col-md-4</p>
	</section>
	<section class="row">
		<p class="col-lg-4">.col-lg-4</p>
		<p class="col-lg-4">.col-lg-4</p>
		<p class="col-lg-4">.col-lg-4</p>
	</section>
</section>

<!-- EXAMPLE 2 -->
<h2 class="text-center">Example 2 - .container</h2>
<section class="container example2">
	<section class="row">
		<p class="col-xs-2 col-xs-offset-5">.col-xs-2 .col-xs-offset-5</p>
	</section>
	<section class="row">
		<p class="col-sm-2 col-sm-offset-5">.col-sm-2 .col-sm-offset-5</p>
	</section>
	<section class="row">
		<p class="col-md-2 col-md-offset-5">.col-md-2 .col-md-offset-5</p>
	</section>
	<section class="row">
		<p class="col-lg-2 col-lg-offset-5">.col-lg-2 .col-lg-offset-5</p>
	</section>
</section>

<h2 class="text-center">Example 2 - .container-fluid</h2>
<section class="container-fluid example2">
	<section class="row">
		<p class="col-xs-2 col-xs-offset-5">.col-xs-2 .col-xs-offset-5</p>
	</section>
	<section class="row">
		<p class="col-sm-2 col-sm-offset-5">.col-sm-2 .col-sm-offset-5</p>
	</section>
	<section class="row">
		<p class="col-md-2 col-md-offset-5">.col-md-2 .col-md-offset-5</p>
	</section>
	<section class="row">
		<p class="col-lg-2 col-lg-offset-5">.col-lg-2 .col-lg-offset-5</p>
	</section>
</section>

<!-- EXAMPLE 3 -->
<h2 class="text-center">Example 3 - .container</h2>
<section class="container example3">
	<section class="row">
		<p class="col-xs-4 col-xs-offset-4">.col-xs-4 .col-xs-offset-4</p>
	</section>
	<section class="row">
		<p class="col-sm-4 col-sm-offset-4">.col-sm-4 .col-sm-offset-4</p>
	</section>
	<section class="row">
		<p class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</p>
	</section>
	<section class="row">
		<p class="col-lg-4 col-lg-offset-4">.col-lg-4 .col-lg-offset-4</p>
	</section>
</section>

<h2 class="text-center">Example 3 - .container-fluid</h2>
<section class="container-fluid example3">
	<section class="row">
		<p class="col-xs-4 col-xs-offset-4">.col-xs-4 .col-xs-offset-4</p>
	</section>
	<section class="row">
		<p class="col-sm-4 col-sm-offset-4">.col-sm-4 .col-sm-offset-4</p>
	</section>
	<section class="row">
		<p class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</p>
	</section>
	<section class="row">
		<p class="col-lg-4 col-lg-offset-4">.col-lg-4 .col-lg-offset-4</p>
	</section>
</section>

<!-- EXAMPLE 4 -->
<h2 class="text-center">Example 4 - .container</h2>
<section class="container example4">
	<section class="row">
		<p class="col-xs-6 col-xs-offset-3">.col-xs-6 .col-xs-offset-3</p>
	</section>
	<section class="row">
		<p class="col-sm-6 col-sm-offset-3">.col-sm-6 .col-sm-offset-3</p>
	</section>
	<section class="row">
		<p class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</p>
	</section>
	<section class="row">
		<p class="col-lg-6 col-lg-offset-3">.col-lg-6 .col-lg-offset-3</p>
	</section>
</section>

<h2 class="text-center">Example 4 - .container-fluid</h2>
<section class="container-fluid example4">
	<section class="row">
		<p class="col-xs-6 col-xs-offset-3">.col-xs-6 .col-xs-offset-3</p>
	</section>
	<section class="row">
		<p class="col-sm-6 col-sm-offset-3">.col-sm-6 .col-sm-offset-3</p>
	</section>
	<section class="row">
		<p class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</p>
	</section>
	<section class="row">
		<p class="col-lg-6 col-lg-offset-3">.col-lg-6 .col-lg-offset-3</p>
	</section>
</section>

<!-- EXAMPLE 5 -->
<h2 class="text-center">Example 5 - .container</h2>
<section class="container example5">
	<section class="row">
		<p class="col-xs-8 col-xs-offset-2">.col-xs-8 .col-xs-offset-2</p>
	</section>
	<section class="row">
		<p class="col-sm-8 col-sm-offset-2">.col-sm-8 .col-sm-offset-2</p>
	</section>
	<section class="row">
		<p class="col-md-8 col-md-offset-2">.col-md-8 .col-md-offset-2</p>
	</section>
	<section class="row">
		<p class="col-lg-8 col-lg-offset-2">.col-lg-8 .col-lg-offset-2</p>
	</section>
</section>

<h2 class="text-center">Example 5 - .container-fluid</h2>
<section class="container-fluid example5">
	<section class="row">
		<p class="col-xs-8 col-xs-offset-2">.col-xs-8 .col-xs-offset-2</p>
	</section>
	<section class="row">
		<p class="col-sm-8 col-sm-offset-2">.col-sm-8 .col-sm-offset-2</p>
	</section>
	<section class="row">
		<p class="col-md-8 col-md-offset-2">.col-md-8 .col-md-offset-2</p>
	</section>
	<section class="row">
		<p class="col-lg-8 col-lg-offset-2">.col-lg-8 .col-lg-offset-2</p>
	</section>
</section>

<h1 class="text-center">How to use the Bootstrap grid</h1>

<div class="bg-primary container" id="instructions">
	<p>The Bootstrap grid requirements are:</p>
	<ol>
		<li>
			You need a wrapper element​ in the <strong>container</strong> or <strong>container-fluid</strong> class.
		</li>
		<li>
			Inside of that, you need a wrapper element in the <strong>row</strong> class.
		</li>
		<li>
			Inside of that, you need the element(s) that go(es) into the row, each of which need to be in the <strong>col-??-?</strong> class, with <strong>??</strong> representing a size and <strong>?</strong> representing a number of columns.
			<ul>
				<li>
					The size can be <strong>xs</strong> or <strong>sm</strong> or <strong>md</strong> or <strong>lg</strong>.
					<ul>
						<li>
							<strong>xs</strong> means extra small (example: phone)
						</li>
						<li>
							<strong>sm</strong> means small (example: tablet)
						</li>
						<li>
							<strong>md</strong> means medium (example: laptop)
						</li>
						<li>
							<strong>lg</strong> means large (example: desktop)
						</li>
					</ul>
				</li>
				<li>
					The number of columns specifies how many of the 12 available columns in the Bootstrap grid the element should use. For example:
					<ul>
						<li>
							If you want an element to use 12 columns, you would put it into the <strong>col-xs-12</strong> or <strong>col-sm-12</strong> or <strong>col-md-12</strong> or <strong>col-lg-12</strong> class.
						</li>
						<li>
							If you want an element to use 8 columns, you would put it into the <strong>col-xs-8</strong> or <strong>col-sm-8</strong> or <strong>col-md-8</strong> or <strong>col-lg-8</strong> class.
						</li>
					</ul>
				</li>
			</ul>
		</li>
	</ol>
	<p>
		This example shows an element that takes up all 12 of the available Bootstrap grid columns:
<xmp><section class="container">
	<section class="row">
		<p class="col-xs-12">example</p>
	</section>
</section></xmp>
		</p>
		<p>
			This example shows 3 elements, each of which takes up 4 of the available Bootstrap grid columns:
<xmp><section class="container">
	<section class="row">
		<p class="col-xs-4">example</p>
		<p class="col-xs-4">example</p>
		<p class="col-xs-4">example</p>
	</section>
</section></xmp>
		</p>
		<p>	
			If you want to specify where, in the grid, an element is placed, you would put it into the <strong>col-xs-offset-n</strong> or <strong>col-sm-offset-n</strong> or <strong>col-md-offset-n</strong> or <strong>col-lg-offset-n</strong> class, with <strong>n</strong> being the number of columns you would like it to be offset by (how many empty columns you would like there to be to the left of the element).
		</p>
		<p>
			This example shows an element that uses 4 of the available Bootstrap grid columns and is offset by 3 columns (has 3 empty columns to the left of it):
<xmp><section class="container">
	<section class="row">
		<p class="col-xs-4 col-lg-offset-3">example</p>
	</section>
</section></xmp>
	</p>
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/Ellyria/a-pen-by-ellyria-LLRpEm */
body {
	background-color: gainsboro;
	}
.example1 {
	background-color: lightgreen;
	}
.example2 {
	background-color: lightblue;
	}
.example3 {
	background-color: violet;
	}
.example4 {
	background-color: lightsalmon;
	}
.example5 {
	background-color: khaki;
	}
#instructions {
	margin-bottom: 2%;
	}
#introduction p, #instructions p {
	background-color: inherit;
	border: none;
	}
p {
	background-color: white;
	border: 1px solid black;
	}
.row {
	margin-top: 1%;
	}
section {/*browser backward compatibility*/
	display: block;
	}
xmp {
	font-family: monospace;
	margin-left: 8%;
	}

Comments