Skip to content

Instantly share code, notes, and snippets.

@Ellyria

Ellyria/BootstrapContainerBehavior.html

Created June 11, 2017 17:48
Show Gist options
  • Save Ellyria/a4846e06a4b000f4e82e21bc024bb139 to your computer and use it in GitHub Desktop.
Save Ellyria/a4846e06a4b000f4e82e21bc024bb139 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
BootstrapContainerBehavior.html
<!DOCTYPE html>
<html lang="en">
<head>
<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"/>
<style>
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%;
}
</style>
</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>
<!-- 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]-->
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment