PROWAREtech
CSS: Mastering Bootstrap Rows and Columns
How the rows and columns work.
This article shows how easy it is to master Bootstrap rows and columns. This requires HTML and CSS.
Columns must be inside of a DIV using the row class. And, with bootstrap, all content should be wrapped in a DIV using the container or container-fluid class.
The following classes define the columns for extra small (XS), small (SM), medium (MD) and large (LG) screen sizes: col-xs-1, col-sm-1, col-md-1, col-lg-1, col-xs-2, col-sm-2, col-md-2, col-lg-2, col-xs-3, col-sm-3, col-md-3, col-lg-3, col-xs-4, col-sm-4, col-md-4, col-lg-4, col-xs-5, col-sm-5, col-md-5, col-lg-5, col-xs-6, col-sm-6, col-md-6, col-lg-6, col-xs-7, col-sm-7, col-md-7, col-lg-7, col-xs-8, col-sm-8, col-md-8, col-lg-8, col-xs-9, col-sm-9, col-md-9, col-lg-9, col-xs-10, col-sm-10, col-md-10, col-lg-10, col-xs-11, col-sm-11, col-md-11, col-lg-11, col-xs-12, col-sm-12, col-md-12, col-lg-12
First, it is important to understand that there are twelve (12) available spaces to be used by columns. The trailing numbers, 1-12, of the above classes are used to define how many of the twelve (12) available spaces are taken up by the columns. col-xs-12 will occupy one column. To figure this out just divide this trailing number by 12. Twelve divided by 12 equals 1 (12/12=1) column. col-sm-4 is 12/4=3 (three) columns so when the screen is small, each column will occupy four of the 12 spaces resulting in three columns. Finally, col-lg-1 will use all twelve of the spaces separately resulting in 12 columns.
Sometimes, the class clearfix must be used in a new DIV to make columns stop wrapping around each other due to the different amounts of content contained within. And this must be set for each screen width (XS, SM, MD and LG).
SKIP OVER THE BOOTSTRAP CSS CODE.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Bootstrap Rows and Columns</title>
<style>
/* EXTRACTED FROM BOOTSTRAP KIT */
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html {
font-family: sans-serif;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
font-size: 10px;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body {
margin: 0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.42857143;
color: #333;
background-color: #fff;
}
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
@media (min-width: 768px) {
.container {
width: 750px;
}
}
@media (min-width: 992px) {
.container {
width: 970px;
}
}
@media (min-width: 1200px) {
.container {
width: 1170px;
}
}
.container-fluid {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.row {
margin-right: -15px;
margin-left: -15px;
}
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
float: left;
}
.col-xs-12 {
width: 100%;
}
.col-xs-11 {
width: 91.66666667%;
}
.col-xs-10 {
width: 83.33333333%;
}
.col-xs-9 {
width: 75%;
}
.col-xs-8 {
width: 66.66666667%;
}
.col-xs-7 {
width: 58.33333333%;
}
.col-xs-6 {
width: 50%;
}
.col-xs-5 {
width: 41.66666667%;
}
.col-xs-4 {
width: 33.33333333%;
}
.col-xs-3 {
width: 25%;
}
.col-xs-2 {
width: 16.66666667%;
}
.col-xs-1 {
width: 8.33333333%;
}
.col-xs-pull-12 {
right: 100%;
}
.col-xs-pull-11 {
right: 91.66666667%;
}
.col-xs-pull-10 {
right: 83.33333333%;
}
.col-xs-pull-9 {
right: 75%;
}
.col-xs-pull-8 {
right: 66.66666667%;
}
.col-xs-pull-7 {
right: 58.33333333%;
}
.col-xs-pull-6 {
right: 50%;
}
.col-xs-pull-5 {
right: 41.66666667%;
}
.col-xs-pull-4 {
right: 33.33333333%;
}
.col-xs-pull-3 {
right: 25%;
}
.col-xs-pull-2 {
right: 16.66666667%;
}
.col-xs-pull-1 {
right: 8.33333333%;
}
.col-xs-pull-0 {
right: auto;
}
.col-xs-push-12 {
left: 100%;
}
.col-xs-push-11 {
left: 91.66666667%;
}
.col-xs-push-10 {
left: 83.33333333%;
}
.col-xs-push-9 {
left: 75%;
}
.col-xs-push-8 {
left: 66.66666667%;
}
.col-xs-push-7 {
left: 58.33333333%;
}
.col-xs-push-6 {
left: 50%;
}
.col-xs-push-5 {
left: 41.66666667%;
}
.col-xs-push-4 {
left: 33.33333333%;
}
.col-xs-push-3 {
left: 25%;
}
.col-xs-push-2 {
left: 16.66666667%;
}
.col-xs-push-1 {
left: 8.33333333%;
}
.col-xs-push-0 {
left: auto;
}
.col-xs-offset-12 {
margin-left: 100%;
}
.col-xs-offset-11 {
margin-left: 91.66666667%;
}
.col-xs-offset-10 {
margin-left: 83.33333333%;
}
.col-xs-offset-9 {
margin-left: 75%;
}
.col-xs-offset-8 {
margin-left: 66.66666667%;
}
.col-xs-offset-7 {
margin-left: 58.33333333%;
}
.col-xs-offset-6 {
margin-left: 50%;
}
.col-xs-offset-5 {
margin-left: 41.66666667%;
}
.col-xs-offset-4 {
margin-left: 33.33333333%;
}
.col-xs-offset-3 {
margin-left: 25%;
}
.col-xs-offset-2 {
margin-left: 16.66666667%;
}
.col-xs-offset-1 {
margin-left: 8.33333333%;
}
.col-xs-offset-0 {
margin-left: 0;
}
@media (min-width: 768px) {
.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
float: left;
}
.col-sm-12 {
width: 100%;
}
.col-sm-11 {
width: 91.66666667%;
}
.col-sm-10 {
width: 83.33333333%;
}
.col-sm-9 {
width: 75%;
}
.col-sm-8 {
width: 66.66666667%;
}
.col-sm-7 {
width: 58.33333333%;
}
.col-sm-6 {
width: 50%;
}
.col-sm-5 {
width: 41.66666667%;
}
.col-sm-4 {
width: 33.33333333%;
}
.col-sm-3 {
width: 25%;
}
.col-sm-2 {
width: 16.66666667%;
}
.col-sm-1 {
width: 8.33333333%;
}
.col-sm-pull-12 {
right: 100%;
}
.col-sm-pull-11 {
right: 91.66666667%;
}
.col-sm-pull-10 {
right: 83.33333333%;
}
.col-sm-pull-9 {
right: 75%;
}
.col-sm-pull-8 {
right: 66.66666667%;
}
.col-sm-pull-7 {
right: 58.33333333%;
}
.col-sm-pull-6 {
right: 50%;
}
.col-sm-pull-5 {
right: 41.66666667%;
}
.col-sm-pull-4 {
right: 33.33333333%;
}
.col-sm-pull-3 {
right: 25%;
}
.col-sm-pull-2 {
right: 16.66666667%;
}
.col-sm-pull-1 {
right: 8.33333333%;
}
.col-sm-pull-0 {
right: auto;
}
.col-sm-push-12 {
left: 100%;
}
.col-sm-push-11 {
left: 91.66666667%;
}
.col-sm-push-10 {
left: 83.33333333%;
}
.col-sm-push-9 {
left: 75%;
}
.col-sm-push-8 {
left: 66.66666667%;
}
.col-sm-push-7 {
left: 58.33333333%;
}
.col-sm-push-6 {
left: 50%;
}
.col-sm-push-5 {
left: 41.66666667%;
}
.col-sm-push-4 {
left: 33.33333333%;
}
.col-sm-push-3 {
left: 25%;
}
.col-sm-push-2 {
left: 16.66666667%;
}
.col-sm-push-1 {
left: 8.33333333%;
}
.col-sm-push-0 {
left: auto;
}
.col-sm-offset-12 {
margin-left: 100%;
}
.col-sm-offset-11 {
margin-left: 91.66666667%;
}
.col-sm-offset-10 {
margin-left: 83.33333333%;
}
.col-sm-offset-9 {
margin-left: 75%;
}
.col-sm-offset-8 {
margin-left: 66.66666667%;
}
.col-sm-offset-7 {
margin-left: 58.33333333%;
}
.col-sm-offset-6 {
margin-left: 50%;
}
.col-sm-offset-5 {
margin-left: 41.66666667%;
}
.col-sm-offset-4 {
margin-left: 33.33333333%;
}
.col-sm-offset-3 {
margin-left: 25%;
}
.col-sm-offset-2 {
margin-left: 16.66666667%;
}
.col-sm-offset-1 {
margin-left: 8.33333333%;
}
.col-sm-offset-0 {
margin-left: 0;
}
}
@media (min-width: 992px) {
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
float: left;
}
.col-md-12 {
width: 100%;
}
.col-md-11 {
width: 91.66666667%;
}
.col-md-10 {
width: 83.33333333%;
}
.col-md-9 {
width: 75%;
}
.col-md-8 {
width: 66.66666667%;
}
.col-md-7 {
width: 58.33333333%;
}
.col-md-6 {
width: 50%;
}
.col-md-5 {
width: 41.66666667%;
}
.col-md-4 {
width: 33.33333333%;
}
.col-md-3 {
width: 25%;
}
.col-md-2 {
width: 16.66666667%;
}
.col-md-1 {
width: 8.33333333%;
}
.col-md-pull-12 {
right: 100%;
}
.col-md-pull-11 {
right: 91.66666667%;
}
.col-md-pull-10 {
right: 83.33333333%;
}
.col-md-pull-9 {
right: 75%;
}
.col-md-pull-8 {
right: 66.66666667%;
}
.col-md-pull-7 {
right: 58.33333333%;
}
.col-md-pull-6 {
right: 50%;
}
.col-md-pull-5 {
right: 41.66666667%;
}
.col-md-pull-4 {
right: 33.33333333%;
}
.col-md-pull-3 {
right: 25%;
}
.col-md-pull-2 {
right: 16.66666667%;
}
.col-md-pull-1 {
right: 8.33333333%;
}
.col-md-pull-0 {
right: auto;
}
.col-md-push-12 {
left: 100%;
}
.col-md-push-11 {
left: 91.66666667%;
}
.col-md-push-10 {
left: 83.33333333%;
}
.col-md-push-9 {
left: 75%;
}
.col-md-push-8 {
left: 66.66666667%;
}
.col-md-push-7 {
left: 58.33333333%;
}
.col-md-push-6 {
left: 50%;
}
.col-md-push-5 {
left: 41.66666667%;
}
.col-md-push-4 {
left: 33.33333333%;
}
.col-md-push-3 {
left: 25%;
}
.col-md-push-2 {
left: 16.66666667%;
}
.col-md-push-1 {
left: 8.33333333%;
}
.col-md-push-0 {
left: auto;
}
.col-md-offset-12 {
margin-left: 100%;
}
.col-md-offset-11 {
margin-left: 91.66666667%;
}
.col-md-offset-10 {
margin-left: 83.33333333%;
}
.col-md-offset-9 {
margin-left: 75%;
}
.col-md-offset-8 {
margin-left: 66.66666667%;
}
.col-md-offset-7 {
margin-left: 58.33333333%;
}
.col-md-offset-6 {
margin-left: 50%;
}
.col-md-offset-5 {
margin-left: 41.66666667%;
}
.col-md-offset-4 {
margin-left: 33.33333333%;
}
.col-md-offset-3 {
margin-left: 25%;
}
.col-md-offset-2 {
margin-left: 16.66666667%;
}
.col-md-offset-1 {
margin-left: 8.33333333%;
}
.col-md-offset-0 {
margin-left: 0;
}
}
@media (min-width: 1200px) {
.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
float: left;
}
.col-lg-12 {
width: 100%;
}
.col-lg-11 {
width: 91.66666667%;
}
.col-lg-10 {
width: 83.33333333%;
}
.col-lg-9 {
width: 75%;
}
.col-lg-8 {
width: 66.66666667%;
}
.col-lg-7 {
width: 58.33333333%;
}
.col-lg-6 {
width: 50%;
}
.col-lg-5 {
width: 41.66666667%;
}
.col-lg-4 {
width: 33.33333333%;
}
.col-lg-3 {
width: 25%;
}
.col-lg-2 {
width: 16.66666667%;
}
.col-lg-1 {
width: 8.33333333%;
}
.col-lg-pull-12 {
right: 100%;
}
.col-lg-pull-11 {
right: 91.66666667%;
}
.col-lg-pull-10 {
right: 83.33333333%;
}
.col-lg-pull-9 {
right: 75%;
}
.col-lg-pull-8 {
right: 66.66666667%;
}
.col-lg-pull-7 {
right: 58.33333333%;
}
.col-lg-pull-6 {
right: 50%;
}
.col-lg-pull-5 {
right: 41.66666667%;
}
.col-lg-pull-4 {
right: 33.33333333%;
}
.col-lg-pull-3 {
right: 25%;
}
.col-lg-pull-2 {
right: 16.66666667%;
}
.col-lg-pull-1 {
right: 8.33333333%;
}
.col-lg-pull-0 {
right: auto;
}
.col-lg-push-12 {
left: 100%;
}
.col-lg-push-11 {
left: 91.66666667%;
}
.col-lg-push-10 {
left: 83.33333333%;
}
.col-lg-push-9 {
left: 75%;
}
.col-lg-push-8 {
left: 66.66666667%;
}
.col-lg-push-7 {
left: 58.33333333%;
}
.col-lg-push-6 {
left: 50%;
}
.col-lg-push-5 {
left: 41.66666667%;
}
.col-lg-push-4 {
left: 33.33333333%;
}
.col-lg-push-3 {
left: 25%;
}
.col-lg-push-2 {
left: 16.66666667%;
}
.col-lg-push-1 {
left: 8.33333333%;
}
.col-lg-push-0 {
left: auto;
}
.col-lg-offset-12 {
margin-left: 100%;
}
.col-lg-offset-11 {
margin-left: 91.66666667%;
}
.col-lg-offset-10 {
margin-left: 83.33333333%;
}
.col-lg-offset-9 {
margin-left: 75%;
}
.col-lg-offset-8 {
margin-left: 66.66666667%;
}
.col-lg-offset-7 {
margin-left: 58.33333333%;
}
.col-lg-offset-6 {
margin-left: 50%;
}
.col-lg-offset-5 {
margin-left: 41.66666667%;
}
.col-lg-offset-4 {
margin-left: 33.33333333%;
}
.col-lg-offset-3 {
margin-left: 25%;
}
.col-lg-offset-2 {
margin-left: 16.66666667%;
}
.col-lg-offset-1 {
margin-left: 8.33333333%;
}
.col-lg-offset-0 {
margin-left: 0;
}
}
.clearfix:before,
.clearfix:after,
.container:before,
.container:after,
.container-fluid:before,
.container-fluid:after,
.row:before,
.row:after {
display: table;
content: " ";
}
.clearfix:after,
.container:after,
.container-fluid:after,
.row:after {
clear: both;
}
.visible-xs,
.visible-sm,
.visible-md,
.visible-lg {
display: none !important;
}
@media (max-width: 767px) {
.visible-xs {
display: block !important;
}
table.visible-xs {
display: table !important;
}
tr.visible-xs {
display: table-row !important;
}
th.visible-xs,
td.visible-xs {
display: table-cell !important;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.visible-sm {
display: block !important;
}
table.visible-sm {
display: table !important;
}
tr.visible-sm {
display: table-row !important;
}
th.visible-sm,
td.visible-sm {
display: table-cell !important;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.visible-md {
display: block !important;
}
table.visible-md {
display: table !important;
}
tr.visible-md {
display: table-row !important;
}
th.visible-md,
td.visible-md {
display: table-cell !important;
}
}
@media (min-width: 1200px) {
.visible-lg {
display: block !important;
}
table.visible-lg {
display: table !important;
}
tr.visible-lg {
display: table-row !important;
}
th.visible-lg,
td.visible-lg {
display: table-cell !important;
}
}
</style>
</head>
<body>
<div style="background-color:crimson;text-align:center;color:white;padding:15px;">container CLASS</div>
<div>
<div class="container">
<div class="row"><!--TWELVE COLUMNS-->
<div class="col-lg-1 col-md-3 col-sm-4 col-xs-12">
<h3>COL 1</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quae necessitatibus voluptas dolorum, fugiat vero inventore deserunt odio dolore nobis nisi facilis vitae maiores nostrum odit.</p>
</div>
<div class="col-lg-1 col-md-3 col-sm-4 col-xs-12">
<h3>COL 2</h3>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Autem doloribus deserunt eveniet porro aperiam ut cumque nihil eum neque doloremque a hic nobis possimus nisi similique culpa impedit atque mollitia architecto, magni sed! Suscipit consequatur deserunt illo adipisci eligendi odio asperiores ipsa inventore debitis. Dignissimos veniam sequi recusandae dolores harum!</p>
</div>
<div class="col-lg-1 col-md-3 col-sm-4 col-xs-12">
<h3>COL 3</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui rem distinctio assumenda a autem fugit sint nemo. Recusandae, nobis architecto?</p>
</div>
<div class="clearfix visible-sm"></div><!--MUST ADD THIS TO MAKE COLUMNS STOP WRAPPING WITH col-sm-4-->
<div class="col-lg-1 col-md-3 col-sm-4 col-xs-12">
<h3>COL 4</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Unde, illum voluptatum porro necessitatibus nihil sunt ab delectus ex, vitae itaque ea nostrum ducimus reiciendis voluptates. Corporis inventore dignissimos esse accusamus eos, dolores officiis iste eum fugit? Quasi sapiente accusamus repudiandae aperiam blanditiis corrupti nisi eaque, nesciunt, tempore ad dignissimos libero assumenda modi quos dolor nobis itaque in perferendis vel. Et!</p>
</div>
<div class="col-lg-1 col-md-3 col-sm-4 col-xs-12">
<h3>COL 5</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Architecto molestiae, deserunt soluta corporis hic recusandae repellendus quaerat quis non exercitationem, vitae itaque cupiditate sequi unde totam sint facilis placeat quidem debitis at maxime et? Expedita harum nisi obcaecati voluptates suscipit iste omnis dignissimos corrupti repellendus velit repudiandae, eum ea cupiditate quibusdam consequatur amet minima fuga earum sit assumenda reprehenderit unde nam ex distinctio. Illum rem qui hic ipsam maxime recusandae veniam nisi esse aliquid ratione?</p>
</div>
<div class="col-lg-1 col-md-3 col-sm-4 col-xs-12">
<h3>COL 6</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit, dolorum.</p>
</div>
<div class="clearfix visible-sm"></div><!--MUST ADD THIS TO MAKE COLUMNS STOP WRAPPING WITH col-sm-4-->
<div class="col-lg-1 col-md-3 col-sm-4 col-xs-12">
<h3>COL 7</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quae necessitatibus voluptas dolorum, fugiat vero inventore deserunt odio dolore nobis nisi facilis vitae maiores nostrum odit.</p>
</div>
<div class="col-lg-1 col-md-3 col-sm-4 col-xs-12">
<h3>COL 8</h3>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Autem doloribus deserunt eveniet porro aperiam ut cumque nihil eum neque doloremque a hic nobis possimus nisi similique culpa impedit atque mollitia architecto, magni sed! Suscipit consequatur deserunt illo adipisci eligendi odio asperiores ipsa inventore debitis. Dignissimos veniam sequi recusandae dolores harum!</p>
</div>
<div class="clearfix visible-md"></div><!--MUST ADD THIS TO MAKE COLUMNS STOP WRAPPING WITH col-md-3-->
<div class="col-lg-1 col-md-3 col-sm-4 col-xs-12">
<h3>COL 9</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui rem distinctio assumenda a autem fugit sint nemo. Recusandae, nobis architecto?</p>
</div>
<div class="clearfix visible-sm"></div><!--MUST ADD THIS TO MAKE COLUMNS STOP WRAPPING WITH col-sm-4-->
<div class="col-lg-1 col-md-3 col-sm-4 col-xs-12">
<h3>COL 10</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Unde, illum voluptatum porro necessitatibus nihil sunt ab delectus ex, vitae itaque ea nostrum ducimus reiciendis voluptates. Corporis inventore dignissimos esse accusamus eos, dolores officiis iste eum fugit? Quasi sapiente accusamus repudiandae aperiam blanditiis corrupti nisi eaque, nesciunt, tempore ad dignissimos libero assumenda modi quos dolor nobis itaque in perferendis vel. Et!</p>
</div>
<div class="col-lg-1 col-md-3 col-sm-4 col-xs-12">
<h3>COL 11</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Architecto molestiae, deserunt soluta corporis hic recusandae repellendus quaerat quis non exercitationem, vitae itaque cupiditate sequi unde totam sint facilis placeat quidem debitis at maxime et? Expedita harum nisi obcaecati voluptates suscipit iste omnis dignissimos corrupti repellendus velit repudiandae, eum ea cupiditate quibusdam consequatur amet minima fuga earum sit assumenda reprehenderit unde nam ex distinctio. Illum rem qui hic ipsam maxime recusandae veniam nisi esse aliquid ratione?</p>
</div>
<div class="col-lg-1 col-md-3 col-sm-4 col-xs-12">
<h3>COL 12</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit, dolorum.</p>
</div>
</div>
</div>
<div class="container">
<div class="row"><!--SIX COLUMNS-->
<div class="col-lg-2 col-md-6 col-sm-6 col-xs-12">
<h3>COL 1</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quae necessitatibus voluptas dolorum, fugiat vero inventore deserunt odio dolore nobis nisi facilis vitae maiores nostrum odit.</p>
</div>
<div class="col-lg-2 col-md-6 col-sm-6 col-xs-12">
<h3>COL 2</h3>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Autem doloribus deserunt eveniet porro aperiam ut cumque nihil eum neque doloremque a hic nobis possimus nisi similique culpa impedit atque mollitia architecto, magni sed! Suscipit consequatur deserunt illo adipisci eligendi odio asperiores ipsa inventore debitis. Dignissimos veniam sequi recusandae dolores harum!</p>
</div>
<div class="col-lg-2 col-md-6 col-sm-6 col-xs-12">
<h3>COL 3</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui rem distinctio assumenda a autem fugit sint nemo. Recusandae, nobis architecto?</p>
</div>
<div class="col-lg-2 col-md-6 col-sm-6 col-xs-12">
<h3>COL 4</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Unde, illum voluptatum porro necessitatibus nihil sunt ab delectus ex, vitae itaque ea nostrum ducimus reiciendis voluptates. Corporis inventore dignissimos esse accusamus eos, dolores officiis iste eum fugit? Quasi sapiente accusamus repudiandae aperiam blanditiis corrupti nisi eaque, nesciunt, tempore ad dignissimos libero assumenda modi quos dolor nobis itaque in perferendis vel. Et!</p>
</div>
<div class="col-lg-2 col-md-6 col-sm-6 col-xs-12">
<h3>COL 5</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Architecto molestiae, deserunt soluta corporis hic recusandae repellendus quaerat quis non exercitationem, vitae itaque cupiditate sequi unde totam sint facilis placeat quidem debitis at maxime et? Expedita harum nisi obcaecati voluptates suscipit iste omnis dignissimos corrupti repellendus velit repudiandae, eum ea cupiditate quibusdam consequatur amet minima fuga earum sit assumenda reprehenderit unde nam ex distinctio. Illum rem qui hic ipsam maxime recusandae veniam nisi esse aliquid ratione?</p>
</div>
<div class="col-lg-2 col-md-6 col-sm-6 col-xs-12">
<h3>COL 6</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit, dolorum.</p>
</div>
</div>
</div>
<div class="container">
<div class="row"><!--FOUR COLUMNS-->
<div class="col-lg-3 col-md-6 col-sm-6 col-xs-12">
<h3>COL 1</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quae necessitatibus voluptas dolorum, fugiat vero inventore deserunt odio dolore nobis nisi facilis vitae maiores nostrum odit.</p>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 col-xs-12">
<h3>COL 2</h3>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Autem doloribus deserunt eveniet porro aperiam ut cumque nihil eum neque doloremque a hic nobis possimus nisi similique culpa impedit atque mollitia architecto, magni sed! Suscipit consequatur deserunt illo adipisci eligendi odio asperiores ipsa inventore debitis. Dignissimos veniam sequi recusandae dolores harum!</p>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 col-xs-12">
<h3>COL 3</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui rem distinctio assumenda a autem fugit sint nemo. Recusandae, nobis architecto?</p>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 col-xs-12">
<h3>COL 4</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Unde, illum voluptatum porro necessitatibus nihil sunt ab delectus ex, vitae itaque ea nostrum ducimus reiciendis voluptates. Corporis inventore dignissimos esse accusamus eos, dolores officiis iste eum fugit? Quasi sapiente accusamus repudiandae aperiam blanditiis corrupti nisi eaque, nesciunt, tempore ad dignissimos libero assumenda modi quos dolor nobis itaque in perferendis vel. Et!</p>
</div>
</div>
</div>
</div>
<div style="background-color:crimson;text-align:center;color:white;padding:15px;">container-fluid CLASS</div>
<div>
<div class="container-fluid">
<div class="row"><!--TWELVE COLUMNS-->
<div class="col-lg-1 col-md-3 col-sm-4 col-xs-12">
<h3>COL 1</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quae necessitatibus voluptas dolorum, fugiat vero inventore deserunt odio dolore nobis nisi facilis vitae maiores nostrum odit.</p>
</div>
<div class="col-lg-1 col-md-3 col-sm-4 col-xs-12">
<h3>COL 2</h3>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Autem doloribus deserunt eveniet porro aperiam ut cumque nihil eum neque doloremque a hic nobis possimus nisi similique culpa impedit atque mollitia architecto, magni sed! Suscipit consequatur deserunt illo adipisci eligendi odio asperiores ipsa inventore debitis. Dignissimos veniam sequi recusandae dolores harum!</p>
</div>
<div class="col-lg-1 col-md-3 col-sm-4 col-xs-12">
<h3>COL 3</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui rem distinctio assumenda a autem fugit sint nemo. Recusandae, nobis architecto?</p>
</div>
<div class="clearfix visible-sm"></div><!--MUST ADD THIS TO MAKE COLUMNS STOP WRAPPING WITH col-sm-4-->
<div class="col-lg-1 col-md-3 col-sm-4 col-xs-12">
<h3>COL 4</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Unde, illum voluptatum porro necessitatibus nihil sunt ab delectus ex, vitae itaque ea nostrum ducimus reiciendis voluptates. Corporis inventore dignissimos esse accusamus eos, dolores officiis iste eum fugit? Quasi sapiente accusamus repudiandae aperiam blanditiis corrupti nisi eaque, nesciunt, tempore ad dignissimos libero assumenda modi quos dolor nobis itaque in perferendis vel. Et!</p>
</div>
<div class="col-lg-1 col-md-3 col-sm-4 col-xs-12">
<h3>COL 5</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Architecto molestiae, deserunt soluta corporis hic recusandae repellendus quaerat quis non exercitationem, vitae itaque cupiditate sequi unde totam sint facilis placeat quidem debitis at maxime et? Expedita harum nisi obcaecati voluptates suscipit iste omnis dignissimos corrupti repellendus velit repudiandae, eum ea cupiditate quibusdam consequatur amet minima fuga earum sit assumenda reprehenderit unde nam ex distinctio. Illum rem qui hic ipsam maxime recusandae veniam nisi esse aliquid ratione?</p>
</div>
<div class="col-lg-1 col-md-3 col-sm-4 col-xs-12">
<h3>COL 6</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit, dolorum.</p>
</div>
<div class="clearfix visible-sm"></div><!--MUST ADD THIS TO MAKE COLUMNS STOP WRAPPING WITH col-sm-4-->
<div class="col-lg-1 col-md-3 col-sm-4 col-xs-12">
<h3>COL 7</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quae necessitatibus voluptas dolorum, fugiat vero inventore deserunt odio dolore nobis nisi facilis vitae maiores nostrum odit.</p>
</div>
<div class="col-lg-1 col-md-3 col-sm-4 col-xs-12">
<h3>COL 8</h3>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Autem doloribus deserunt eveniet porro aperiam ut cumque nihil eum neque doloremque a hic nobis possimus nisi similique culpa impedit atque mollitia architecto, magni sed! Suscipit consequatur deserunt illo adipisci eligendi odio asperiores ipsa inventore debitis. Dignissimos veniam sequi recusandae dolores harum!</p>
</div>
<div class="clearfix visible-md"></div><!--MUST ADD THIS TO MAKE COLUMNS STOP WRAPPING WITH col-md-3-->
<div class="col-lg-1 col-md-3 col-sm-4 col-xs-12">
<h3>COL 9</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui rem distinctio assumenda a autem fugit sint nemo. Recusandae, nobis architecto?</p>
</div>
<div class="clearfix visible-sm"></div><!--MUST ADD THIS TO MAKE COLUMNS STOP WRAPPING WITH col-sm-4-->
<div class="col-lg-1 col-md-3 col-sm-4 col-xs-12">
<h3>COL 10</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Unde, illum voluptatum porro necessitatibus nihil sunt ab delectus ex, vitae itaque ea nostrum ducimus reiciendis voluptates. Corporis inventore dignissimos esse accusamus eos, dolores officiis iste eum fugit? Quasi sapiente accusamus repudiandae aperiam blanditiis corrupti nisi eaque, nesciunt, tempore ad dignissimos libero assumenda modi quos dolor nobis itaque in perferendis vel. Et!</p>
</div>
<div class="col-lg-1 col-md-3 col-sm-4 col-xs-12">
<h3>COL 11</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Architecto molestiae, deserunt soluta corporis hic recusandae repellendus quaerat quis non exercitationem, vitae itaque cupiditate sequi unde totam sint facilis placeat quidem debitis at maxime et? Expedita harum nisi obcaecati voluptates suscipit iste omnis dignissimos corrupti repellendus velit repudiandae, eum ea cupiditate quibusdam consequatur amet minima fuga earum sit assumenda reprehenderit unde nam ex distinctio. Illum rem qui hic ipsam maxime recusandae veniam nisi esse aliquid ratione?</p>
</div>
<div class="col-lg-1 col-md-3 col-sm-4 col-xs-12">
<h3>COL 12</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit, dolorum.</p>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row"><!--SIX COLUMNS-->
<div class="col-lg-2 col-md-6 col-sm-6 col-xs-12">
<h3>COL 1</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quae necessitatibus voluptas dolorum, fugiat vero inventore deserunt odio dolore nobis nisi facilis vitae maiores nostrum odit.</p>
</div>
<div class="col-lg-2 col-md-6 col-sm-6 col-xs-12">
<h3>COL 2</h3>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Autem doloribus deserunt eveniet porro aperiam ut cumque nihil eum neque doloremque a hic nobis possimus nisi similique culpa impedit atque mollitia architecto, magni sed! Suscipit consequatur deserunt illo adipisci eligendi odio asperiores ipsa inventore debitis. Dignissimos veniam sequi recusandae dolores harum!</p>
</div>
<div class="col-lg-2 col-md-6 col-sm-6 col-xs-12">
<h3>COL 3</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui rem distinctio assumenda a autem fugit sint nemo. Recusandae, nobis architecto?</p>
</div>
<div class="col-lg-2 col-md-6 col-sm-6 col-xs-12">
<h3>COL 4</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Unde, illum voluptatum porro necessitatibus nihil sunt ab delectus ex, vitae itaque ea nostrum ducimus reiciendis voluptates. Corporis inventore dignissimos esse accusamus eos, dolores officiis iste eum fugit? Quasi sapiente accusamus repudiandae aperiam blanditiis corrupti nisi eaque, nesciunt, tempore ad dignissimos libero assumenda modi quos dolor nobis itaque in perferendis vel. Et!</p>
</div>
<div class="col-lg-2 col-md-6 col-sm-6 col-xs-12">
<h3>COL 5</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Architecto molestiae, deserunt soluta corporis hic recusandae repellendus quaerat quis non exercitationem, vitae itaque cupiditate sequi unde totam sint facilis placeat quidem debitis at maxime et? Expedita harum nisi obcaecati voluptates suscipit iste omnis dignissimos corrupti repellendus velit repudiandae, eum ea cupiditate quibusdam consequatur amet minima fuga earum sit assumenda reprehenderit unde nam ex distinctio. Illum rem qui hic ipsam maxime recusandae veniam nisi esse aliquid ratione?</p>
</div>
<div class="col-lg-2 col-md-6 col-sm-6 col-xs-12">
<h3>COL 6</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit, dolorum.</p>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row"><!--FOUR COLUMNS-->
<div class="col-lg-3 col-md-6 col-sm-6 col-xs-12">
<h3>COL 1</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quae necessitatibus voluptas dolorum, fugiat vero inventore deserunt odio dolore nobis nisi facilis vitae maiores nostrum odit.</p>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 col-xs-12">
<h3>COL 2</h3>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Autem doloribus deserunt eveniet porro aperiam ut cumque nihil eum neque doloremque a hic nobis possimus nisi similique culpa impedit atque mollitia architecto, magni sed! Suscipit consequatur deserunt illo adipisci eligendi odio asperiores ipsa inventore debitis. Dignissimos veniam sequi recusandae dolores harum!</p>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 col-xs-12">
<h3>COL 3</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui rem distinctio assumenda a autem fugit sint nemo. Recusandae, nobis architecto?</p>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 col-xs-12">
<h3>COL 4</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Unde, illum voluptatum porro necessitatibus nihil sunt ab delectus ex, vitae itaque ea nostrum ducimus reiciendis voluptates. Corporis inventore dignissimos esse accusamus eos, dolores officiis iste eum fugit? Quasi sapiente accusamus repudiandae aperiam blanditiis corrupti nisi eaque, nesciunt, tempore ad dignissimos libero assumenda modi quos dolor nobis itaque in perferendis vel. Et!</p>
</div>
</div>
</div>
</div>
</body>
</html>
The Bootstrap Rows and Columns Specific CSS Code
This is the extract of the Bootstrap rows and columns supporting CSS just in case this is the only reason for using bootstrap. First, the minified version:
*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;font-size:10px;-webkit-tap-highlight-color:rgba(0,0,0,0)}body{margin:0;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px;line-height:1.42857143;color:#333;background-color:#fff}.container{padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}@media(min-width:768px){.container{width:750px}}@media(min-width:992px){.container{width:970px}}@media(min-width:1200px){.container{width:1170px}}.container-fluid{padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}.row{margin-right:-15px;margin-left:-15px}.col-xs-1,.col-sm-1,.col-md-1,.col-lg-1,.col-xs-2,.col-sm-2,.col-md-2,.col-lg-2,.col-xs-3,.col-sm-3,.col-md-3,.col-lg-3,.col-xs-4,.col-sm-4,.col-md-4,.col-lg-4,.col-xs-5,.col-sm-5,.col-md-5,.col-lg-5,.col-xs-6,.col-sm-6,.col-md-6,.col-lg-6,.col-xs-7,.col-sm-7,.col-md-7,.col-lg-7,.col-xs-8,.col-sm-8,.col-md-8,.col-lg-8,.col-xs-9,.col-sm-9,.col-md-9,.col-lg-9,.col-xs-10,.col-sm-10,.col-md-10,.col-lg-10,.col-xs-11,.col-sm-11,.col-md-11,.col-lg-11,.col-xs-12,.col-sm-12,.col-md-12,.col-lg-12{position:relative;min-height:1px;padding-right:15px;padding-left:15px}.col-xs-1,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9,.col-xs-10,.col-xs-11,.col-xs-12{float:left}.col-xs-12{width:100%}.col-xs-11{width:91.66666667%}.col-xs-10{width:83.33333333%}.col-xs-9{width:75%}.col-xs-8{width:66.66666667%}.col-xs-7{width:58.33333333%}.col-xs-6{width:50%}.col-xs-5{width:41.66666667%}.col-xs-4{width:33.33333333%}.col-xs-3{width:25%}.col-xs-2{width:16.66666667%}.col-xs-1{width:8.33333333%}.col-xs-pull-12{right:100%}.col-xs-pull-11{right:91.66666667%}.col-xs-pull-10{right:83.33333333%}.col-xs-pull-9{right:75%}.col-xs-pull-8{right:66.66666667%}.col-xs-pull-7{right:58.33333333%}.col-xs-pull-6{right:50%}.col-xs-pull-5{right:41.66666667%}.col-xs-pull-4{right:33.33333333%}.col-xs-pull-3{right:25%}.col-xs-pull-2{right:16.66666667%}.col-xs-pull-1{right:8.33333333%}.col-xs-pull-0{right:auto}.col-xs-push-12{left:100%}.col-xs-push-11{left:91.66666667%}.col-xs-push-10{left:83.33333333%}.col-xs-push-9{left:75%}.col-xs-push-8{left:66.66666667%}.col-xs-push-7{left:58.33333333%}.col-xs-push-6{left:50%}.col-xs-push-5{left:41.66666667%}.col-xs-push-4{left:33.33333333%}.col-xs-push-3{left:25%}.col-xs-push-2{left:16.66666667%}.col-xs-push-1{left:8.33333333%}.col-xs-push-0{left:auto}.col-xs-offset-12{margin-left:100%}.col-xs-offset-11{margin-left:91.66666667%}.col-xs-offset-10{margin-left:83.33333333%}.col-xs-offset-9{margin-left:75%}.col-xs-offset-8{margin-left:66.66666667%}.col-xs-offset-7{margin-left:58.33333333%}.col-xs-offset-6{margin-left:50%}.col-xs-offset-5{margin-left:41.66666667%}.col-xs-offset-4{margin-left:33.33333333%}.col-xs-offset-3{margin-left:25%}.col-xs-offset-2{margin-left:16.66666667%}.col-xs-offset-1{margin-left:8.33333333%}.col-xs-offset-0{margin-left:0}@media(min-width:768px){.col-sm-1,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-10,.col-sm-11,.col-sm-12{float:left}.col-sm-12{width:100%}.col-sm-11{width:91.66666667%}.col-sm-10{width:83.33333333%}.col-sm-9{width:75%}.col-sm-8{width:66.66666667%}.col-sm-7{width:58.33333333%}.col-sm-6{width:50%}.col-sm-5{width:41.66666667%}.col-sm-4{width:33.33333333%}.col-sm-3{width:25%}.col-sm-2{width:16.66666667%}.col-sm-1{width:8.33333333%}.col-sm-pull-12{right:100%}.col-sm-pull-11{right:91.66666667%}.col-sm-pull-10{right:83.33333333%}.col-sm-pull-9{right:75%}.col-sm-pull-8{right:66.66666667%}.col-sm-pull-7{right:58.33333333%}.col-sm-pull-6{right:50%}.col-sm-pull-5{right:41.66666667%}.col-sm-pull-4{right:33.33333333%}.col-sm-pull-3{right:25%}.col-sm-pull-2{right:16.66666667%}.col-sm-pull-1{right:8.33333333%}.col-sm-pull-0{right:auto}.col-sm-push-12{left:100%}.col-sm-push-11{left:91.66666667%}.col-sm-push-10{left:83.33333333%}.col-sm-push-9{left:75%}.col-sm-push-8{left:66.66666667%}.col-sm-push-7{left:58.33333333%}.col-sm-push-6{left:50%}.col-sm-push-5{left:41.66666667%}.col-sm-push-4{left:33.33333333%}.col-sm-push-3{left:25%}.col-sm-push-2{left:16.66666667%}.col-sm-push-1{left:8.33333333%}.col-sm-push-0{left:auto}.col-sm-offset-12{margin-left:100%}.col-sm-offset-11{margin-left:91.66666667%}.col-sm-offset-10{margin-left:83.33333333%}.col-sm-offset-9{margin-left:75%}.col-sm-offset-8{margin-left:66.66666667%}.col-sm-offset-7{margin-left:58.33333333%}.col-sm-offset-6{margin-left:50%}.col-sm-offset-5{margin-left:41.66666667%}.col-sm-offset-4{margin-left:33.33333333%}.col-sm-offset-3{margin-left:25%}.col-sm-offset-2{margin-left:16.66666667%}.col-sm-offset-1{margin-left:8.33333333%}.col-sm-offset-0{margin-left:0}}@media(min-width:992px){.col-md-1,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-10,.col-md-11,.col-md-12{float:left}.col-md-12{width:100%}.col-md-11{width:91.66666667%}.col-md-10{width:83.33333333%}.col-md-9{width:75%}.col-md-8{width:66.66666667%}.col-md-7{width:58.33333333%}.col-md-6{width:50%}.col-md-5{width:41.66666667%}.col-md-4{width:33.33333333%}.col-md-3{width:25%}.col-md-2{width:16.66666667%}.col-md-1{width:8.33333333%}.col-md-pull-12{right:100%}.col-md-pull-11{right:91.66666667%}.col-md-pull-10{right:83.33333333%}.col-md-pull-9{right:75%}.col-md-pull-8{right:66.66666667%}.col-md-pull-7{right:58.33333333%}.col-md-pull-6{right:50%}.col-md-pull-5{right:41.66666667%}.col-md-pull-4{right:33.33333333%}.col-md-pull-3{right:25%}.col-md-pull-2{right:16.66666667%}.col-md-pull-1{right:8.33333333%}.col-md-pull-0{right:auto}.col-md-push-12{left:100%}.col-md-push-11{left:91.66666667%}.col-md-push-10{left:83.33333333%}.col-md-push-9{left:75%}.col-md-push-8{left:66.66666667%}.col-md-push-7{left:58.33333333%}.col-md-push-6{left:50%}.col-md-push-5{left:41.66666667%}.col-md-push-4{left:33.33333333%}.col-md-push-3{left:25%}.col-md-push-2{left:16.66666667%}.col-md-push-1{left:8.33333333%}.col-md-push-0{left:auto}.col-md-offset-12{margin-left:100%}.col-md-offset-11{margin-left:91.66666667%}.col-md-offset-10{margin-left:83.33333333%}.col-md-offset-9{margin-left:75%}.col-md-offset-8{margin-left:66.66666667%}.col-md-offset-7{margin-left:58.33333333%}.col-md-offset-6{margin-left:50%}.col-md-offset-5{margin-left:41.66666667%}.col-md-offset-4{margin-left:33.33333333%}.col-md-offset-3{margin-left:25%}.col-md-offset-2{margin-left:16.66666667%}.col-md-offset-1{margin-left:8.33333333%}.col-md-offset-0{margin-left:0}}@media(min-width:1200px){.col-lg-1,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-10,.col-lg-11,.col-lg-12{float:left}.col-lg-12{width:100%}.col-lg-11{width:91.66666667%}.col-lg-10{width:83.33333333%}.col-lg-9{width:75%}.col-lg-8{width:66.66666667%}.col-lg-7{width:58.33333333%}.col-lg-6{width:50%}.col-lg-5{width:41.66666667%}.col-lg-4{width:33.33333333%}.col-lg-3{width:25%}.col-lg-2{width:16.66666667%}.col-lg-1{width:8.33333333%}.col-lg-pull-12{right:100%}.col-lg-pull-11{right:91.66666667%}.col-lg-pull-10{right:83.33333333%}.col-lg-pull-9{right:75%}.col-lg-pull-8{right:66.66666667%}.col-lg-pull-7{right:58.33333333%}.col-lg-pull-6{right:50%}.col-lg-pull-5{right:41.66666667%}.col-lg-pull-4{right:33.33333333%}.col-lg-pull-3{right:25%}.col-lg-pull-2{right:16.66666667%}.col-lg-pull-1{right:8.33333333%}.col-lg-pull-0{right:auto}.col-lg-push-12{left:100%}.col-lg-push-11{left:91.66666667%}.col-lg-push-10{left:83.33333333%}.col-lg-push-9{left:75%}.col-lg-push-8{left:66.66666667%}.col-lg-push-7{left:58.33333333%}.col-lg-push-6{left:50%}.col-lg-push-5{left:41.66666667%}.col-lg-push-4{left:33.33333333%}.col-lg-push-3{left:25%}.col-lg-push-2{left:16.66666667%}.col-lg-push-1{left:8.33333333%}.col-lg-push-0{left:auto}.col-lg-offset-12{margin-left:100%}.col-lg-offset-11{margin-left:91.66666667%}.col-lg-offset-10{margin-left:83.33333333%}.col-lg-offset-9{margin-left:75%}.col-lg-offset-8{margin-left:66.66666667%}.col-lg-offset-7{margin-left:58.33333333%}.col-lg-offset-6{margin-left:50%}.col-lg-offset-5{margin-left:41.66666667%}.col-lg-offset-4{margin-left:33.33333333%}.col-lg-offset-3{margin-left:25%}.col-lg-offset-2{margin-left:16.66666667%}.col-lg-offset-1{margin-left:8.33333333%}.col-lg-offset-0{margin-left:0}}.clearfix:before,.clearfix:after,.container:before,.container:after,.container-fluid:before,.container-fluid:after,.row:before,.row:after{display:table;content:" "}.clearfix:after,.container:after,.container-fluid:after,.row:after{clear:both}.visible-xs,.visible-sm,.visible-md,.visible-lg{display:none !important}@media(max-width:767px){.visible-xs{display:block !important}table.visible-xs{display:table !important}tr.visible-xs{display:table-row !important}th.visible-xs,td.visible-xs{display:table-cell !important}}@media(min-width:768px) and (max-width:991px){.visible-sm{display:block !important}table.visible-sm{display:table !important}tr.visible-sm{display:table-row !important}th.visible-sm,td.visible-sm{display:table-cell !important}}@media(min-width:992px) and (max-width:1199px){.visible-md{display:block !important}table.visible-md{display:table !important}tr.visible-md{display:table-row !important}th.visible-md,td.visible-md{display:table-cell !important}}@media(min-width:1200px){.visible-lg{display:block !important}table.visible-lg{display:table !important}tr.visible-lg{display:table-row !important}th.visible-lg,td.visible-lg{display:table-cell !important}}Now, the expanded version:
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html {
font-family: sans-serif;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
font-size: 10px;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body {
margin: 0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.42857143;
color: #333;
background-color: #fff;
}
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
@media (min-width: 768px) {
.container {
width: 750px;
}
}
@media (min-width: 992px) {
.container {
width: 970px;
}
}
@media (min-width: 1200px) {
.container {
width: 1170px;
}
}
.container-fluid {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.row {
margin-right: -15px;
margin-left: -15px;
}
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
float: left;
}
.col-xs-12 {
width: 100%;
}
.col-xs-11 {
width: 91.66666667%;
}
.col-xs-10 {
width: 83.33333333%;
}
.col-xs-9 {
width: 75%;
}
.col-xs-8 {
width: 66.66666667%;
}
.col-xs-7 {
width: 58.33333333%;
}
.col-xs-6 {
width: 50%;
}
.col-xs-5 {
width: 41.66666667%;
}
.col-xs-4 {
width: 33.33333333%;
}
.col-xs-3 {
width: 25%;
}
.col-xs-2 {
width: 16.66666667%;
}
.col-xs-1 {
width: 8.33333333%;
}
.col-xs-pull-12 {
right: 100%;
}
.col-xs-pull-11 {
right: 91.66666667%;
}
.col-xs-pull-10 {
right: 83.33333333%;
}
.col-xs-pull-9 {
right: 75%;
}
.col-xs-pull-8 {
right: 66.66666667%;
}
.col-xs-pull-7 {
right: 58.33333333%;
}
.col-xs-pull-6 {
right: 50%;
}
.col-xs-pull-5 {
right: 41.66666667%;
}
.col-xs-pull-4 {
right: 33.33333333%;
}
.col-xs-pull-3 {
right: 25%;
}
.col-xs-pull-2 {
right: 16.66666667%;
}
.col-xs-pull-1 {
right: 8.33333333%;
}
.col-xs-pull-0 {
right: auto;
}
.col-xs-push-12 {
left: 100%;
}
.col-xs-push-11 {
left: 91.66666667%;
}
.col-xs-push-10 {
left: 83.33333333%;
}
.col-xs-push-9 {
left: 75%;
}
.col-xs-push-8 {
left: 66.66666667%;
}
.col-xs-push-7 {
left: 58.33333333%;
}
.col-xs-push-6 {
left: 50%;
}
.col-xs-push-5 {
left: 41.66666667%;
}
.col-xs-push-4 {
left: 33.33333333%;
}
.col-xs-push-3 {
left: 25%;
}
.col-xs-push-2 {
left: 16.66666667%;
}
.col-xs-push-1 {
left: 8.33333333%;
}
.col-xs-push-0 {
left: auto;
}
.col-xs-offset-12 {
margin-left: 100%;
}
.col-xs-offset-11 {
margin-left: 91.66666667%;
}
.col-xs-offset-10 {
margin-left: 83.33333333%;
}
.col-xs-offset-9 {
margin-left: 75%;
}
.col-xs-offset-8 {
margin-left: 66.66666667%;
}
.col-xs-offset-7 {
margin-left: 58.33333333%;
}
.col-xs-offset-6 {
margin-left: 50%;
}
.col-xs-offset-5 {
margin-left: 41.66666667%;
}
.col-xs-offset-4 {
margin-left: 33.33333333%;
}
.col-xs-offset-3 {
margin-left: 25%;
}
.col-xs-offset-2 {
margin-left: 16.66666667%;
}
.col-xs-offset-1 {
margin-left: 8.33333333%;
}
.col-xs-offset-0 {
margin-left: 0;
}
@media (min-width: 768px) {
.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
float: left;
}
.col-sm-12 {
width: 100%;
}
.col-sm-11 {
width: 91.66666667%;
}
.col-sm-10 {
width: 83.33333333%;
}
.col-sm-9 {
width: 75%;
}
.col-sm-8 {
width: 66.66666667%;
}
.col-sm-7 {
width: 58.33333333%;
}
.col-sm-6 {
width: 50%;
}
.col-sm-5 {
width: 41.66666667%;
}
.col-sm-4 {
width: 33.33333333%;
}
.col-sm-3 {
width: 25%;
}
.col-sm-2 {
width: 16.66666667%;
}
.col-sm-1 {
width: 8.33333333%;
}
.col-sm-pull-12 {
right: 100%;
}
.col-sm-pull-11 {
right: 91.66666667%;
}
.col-sm-pull-10 {
right: 83.33333333%;
}
.col-sm-pull-9 {
right: 75%;
}
.col-sm-pull-8 {
right: 66.66666667%;
}
.col-sm-pull-7 {
right: 58.33333333%;
}
.col-sm-pull-6 {
right: 50%;
}
.col-sm-pull-5 {
right: 41.66666667%;
}
.col-sm-pull-4 {
right: 33.33333333%;
}
.col-sm-pull-3 {
right: 25%;
}
.col-sm-pull-2 {
right: 16.66666667%;
}
.col-sm-pull-1 {
right: 8.33333333%;
}
.col-sm-pull-0 {
right: auto;
}
.col-sm-push-12 {
left: 100%;
}
.col-sm-push-11 {
left: 91.66666667%;
}
.col-sm-push-10 {
left: 83.33333333%;
}
.col-sm-push-9 {
left: 75%;
}
.col-sm-push-8 {
left: 66.66666667%;
}
.col-sm-push-7 {
left: 58.33333333%;
}
.col-sm-push-6 {
left: 50%;
}
.col-sm-push-5 {
left: 41.66666667%;
}
.col-sm-push-4 {
left: 33.33333333%;
}
.col-sm-push-3 {
left: 25%;
}
.col-sm-push-2 {
left: 16.66666667%;
}
.col-sm-push-1 {
left: 8.33333333%;
}
.col-sm-push-0 {
left: auto;
}
.col-sm-offset-12 {
margin-left: 100%;
}
.col-sm-offset-11 {
margin-left: 91.66666667%;
}
.col-sm-offset-10 {
margin-left: 83.33333333%;
}
.col-sm-offset-9 {
margin-left: 75%;
}
.col-sm-offset-8 {
margin-left: 66.66666667%;
}
.col-sm-offset-7 {
margin-left: 58.33333333%;
}
.col-sm-offset-6 {
margin-left: 50%;
}
.col-sm-offset-5 {
margin-left: 41.66666667%;
}
.col-sm-offset-4 {
margin-left: 33.33333333%;
}
.col-sm-offset-3 {
margin-left: 25%;
}
.col-sm-offset-2 {
margin-left: 16.66666667%;
}
.col-sm-offset-1 {
margin-left: 8.33333333%;
}
.col-sm-offset-0 {
margin-left: 0;
}
}
@media (min-width: 992px) {
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
float: left;
}
.col-md-12 {
width: 100%;
}
.col-md-11 {
width: 91.66666667%;
}
.col-md-10 {
width: 83.33333333%;
}
.col-md-9 {
width: 75%;
}
.col-md-8 {
width: 66.66666667%;
}
.col-md-7 {
width: 58.33333333%;
}
.col-md-6 {
width: 50%;
}
.col-md-5 {
width: 41.66666667%;
}
.col-md-4 {
width: 33.33333333%;
}
.col-md-3 {
width: 25%;
}
.col-md-2 {
width: 16.66666667%;
}
.col-md-1 {
width: 8.33333333%;
}
.col-md-pull-12 {
right: 100%;
}
.col-md-pull-11 {
right: 91.66666667%;
}
.col-md-pull-10 {
right: 83.33333333%;
}
.col-md-pull-9 {
right: 75%;
}
.col-md-pull-8 {
right: 66.66666667%;
}
.col-md-pull-7 {
right: 58.33333333%;
}
.col-md-pull-6 {
right: 50%;
}
.col-md-pull-5 {
right: 41.66666667%;
}
.col-md-pull-4 {
right: 33.33333333%;
}
.col-md-pull-3 {
right: 25%;
}
.col-md-pull-2 {
right: 16.66666667%;
}
.col-md-pull-1 {
right: 8.33333333%;
}
.col-md-pull-0 {
right: auto;
}
.col-md-push-12 {
left: 100%;
}
.col-md-push-11 {
left: 91.66666667%;
}
.col-md-push-10 {
left: 83.33333333%;
}
.col-md-push-9 {
left: 75%;
}
.col-md-push-8 {
left: 66.66666667%;
}
.col-md-push-7 {
left: 58.33333333%;
}
.col-md-push-6 {
left: 50%;
}
.col-md-push-5 {
left: 41.66666667%;
}
.col-md-push-4 {
left: 33.33333333%;
}
.col-md-push-3 {
left: 25%;
}
.col-md-push-2 {
left: 16.66666667%;
}
.col-md-push-1 {
left: 8.33333333%;
}
.col-md-push-0 {
left: auto;
}
.col-md-offset-12 {
margin-left: 100%;
}
.col-md-offset-11 {
margin-left: 91.66666667%;
}
.col-md-offset-10 {
margin-left: 83.33333333%;
}
.col-md-offset-9 {
margin-left: 75%;
}
.col-md-offset-8 {
margin-left: 66.66666667%;
}
.col-md-offset-7 {
margin-left: 58.33333333%;
}
.col-md-offset-6 {
margin-left: 50%;
}
.col-md-offset-5 {
margin-left: 41.66666667%;
}
.col-md-offset-4 {
margin-left: 33.33333333%;
}
.col-md-offset-3 {
margin-left: 25%;
}
.col-md-offset-2 {
margin-left: 16.66666667%;
}
.col-md-offset-1 {
margin-left: 8.33333333%;
}
.col-md-offset-0 {
margin-left: 0;
}
}
@media (min-width: 1200px) {
.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
float: left;
}
.col-lg-12 {
width: 100%;
}
.col-lg-11 {
width: 91.66666667%;
}
.col-lg-10 {
width: 83.33333333%;
}
.col-lg-9 {
width: 75%;
}
.col-lg-8 {
width: 66.66666667%;
}
.col-lg-7 {
width: 58.33333333%;
}
.col-lg-6 {
width: 50%;
}
.col-lg-5 {
width: 41.66666667%;
}
.col-lg-4 {
width: 33.33333333%;
}
.col-lg-3 {
width: 25%;
}
.col-lg-2 {
width: 16.66666667%;
}
.col-lg-1 {
width: 8.33333333%;
}
.col-lg-pull-12 {
right: 100%;
}
.col-lg-pull-11 {
right: 91.66666667%;
}
.col-lg-pull-10 {
right: 83.33333333%;
}
.col-lg-pull-9 {
right: 75%;
}
.col-lg-pull-8 {
right: 66.66666667%;
}
.col-lg-pull-7 {
right: 58.33333333%;
}
.col-lg-pull-6 {
right: 50%;
}
.col-lg-pull-5 {
right: 41.66666667%;
}
.col-lg-pull-4 {
right: 33.33333333%;
}
.col-lg-pull-3 {
right: 25%;
}
.col-lg-pull-2 {
right: 16.66666667%;
}
.col-lg-pull-1 {
right: 8.33333333%;
}
.col-lg-pull-0 {
right: auto;
}
.col-lg-push-12 {
left: 100%;
}
.col-lg-push-11 {
left: 91.66666667%;
}
.col-lg-push-10 {
left: 83.33333333%;
}
.col-lg-push-9 {
left: 75%;
}
.col-lg-push-8 {
left: 66.66666667%;
}
.col-lg-push-7 {
left: 58.33333333%;
}
.col-lg-push-6 {
left: 50%;
}
.col-lg-push-5 {
left: 41.66666667%;
}
.col-lg-push-4 {
left: 33.33333333%;
}
.col-lg-push-3 {
left: 25%;
}
.col-lg-push-2 {
left: 16.66666667%;
}
.col-lg-push-1 {
left: 8.33333333%;
}
.col-lg-push-0 {
left: auto;
}
.col-lg-offset-12 {
margin-left: 100%;
}
.col-lg-offset-11 {
margin-left: 91.66666667%;
}
.col-lg-offset-10 {
margin-left: 83.33333333%;
}
.col-lg-offset-9 {
margin-left: 75%;
}
.col-lg-offset-8 {
margin-left: 66.66666667%;
}
.col-lg-offset-7 {
margin-left: 58.33333333%;
}
.col-lg-offset-6 {
margin-left: 50%;
}
.col-lg-offset-5 {
margin-left: 41.66666667%;
}
.col-lg-offset-4 {
margin-left: 33.33333333%;
}
.col-lg-offset-3 {
margin-left: 25%;
}
.col-lg-offset-2 {
margin-left: 16.66666667%;
}
.col-lg-offset-1 {
margin-left: 8.33333333%;
}
.col-lg-offset-0 {
margin-left: 0;
}
}
.clearfix:before,
.clearfix:after,
.container:before,
.container:after,
.container-fluid:before,
.container-fluid:after,
.row:before,
.row:after {
display: table;
content: " ";
}
.clearfix:after,
.container:after,
.container-fluid:after,
.row:after {
clear: both;
}
.visible-xs,
.visible-sm,
.visible-md,
.visible-lg {
display: none !important;
}
@media (max-width: 767px) {
.visible-xs {
display: block !important;
}
table.visible-xs {
display: table !important;
}
tr.visible-xs {
display: table-row !important;
}
th.visible-xs,
td.visible-xs {
display: table-cell !important;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.visible-sm {
display: block !important;
}
table.visible-sm {
display: table !important;
}
tr.visible-sm {
display: table-row !important;
}
th.visible-sm,
td.visible-sm {
display: table-cell !important;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.visible-md {
display: block !important;
}
table.visible-md {
display: table !important;
}
tr.visible-md {
display: table-row !important;
}
th.visible-md,
td.visible-md {
display: table-cell !important;
}
}
@media (min-width: 1200px) {
.visible-lg {
display: block !important;
}
table.visible-lg {
display: table !important;
}
tr.visible-lg {
display: table-row !important;
}
th.visible-lg,
td.visible-lg {
display: table-cell !important;
}
}Comment
