<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Understanding Bootstrap Columns, Rows and Containers</title>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container-fluid content-wrapper">
<div class="row">
<div class="col-xs-12 landing-information">
<div class="col-xs-8 text-wrap">
<h1>Understanding the Bootstrap Grid<h1>
<h2>working with containers, rows and columns<h2>
<h3>bootstrap responsive breakpoints:<h3>
<p>col-xs-# reffers to extra small devices (portrait phones, less than 576px)<br>
col-sm-# reffers to small devices (landscape phones, 576px and up)<br>
col-md-# reffers to medium devices (tablets, 768px and up)<br>
col-lg-# reffers to large devices (desktops, 992px and up)<br>
col-lg-# reffers to extra large devices (large desktops, 1200px and up)
</div>
</div>
</div>
<div class="row 1and1to12">
<div class="col-xs-1 individual"><span>one Column of 1.</span></div>
<div class="col-xs-1 individual"><span>one Column of 1.</span></div>
<div class="col-xs-1 individual"><span>one Column of 1.</span></div>
<div class="col-xs-1 individual"><span>one Column of 1.</span></div>
<div class="col-xs-1 individual"><span>one Column of 1.</span></div>
<div class="col-xs-1 individual"><span>one Column of 1.</span></div>
<div class="col-xs-1 individual"><span>one Column of 1.</span></div>
<div class="col-xs-1 individual"><span>one Column of 1.</span></div>
<div class="col-xs-1 individual"><span>one Column of 1.</span></div>
<div class="col-xs-1 individual"><span>one Column of 1.</span></div>
<div class="col-xs-1 individual"><span>one Column of 1.</span></div>
<div class="col-xs-1 individual"><span>one Column of 1.</span></div>
</div>
<div class="row 1and11">
<div class="col-xs-1 left"><span>one Column of 1.</span></div>
<div class="col-xs-11 right"><span>one Column of 11.</span></div>
</div>
<div class="row 2and10">
<div class="col-xs-2 left"><span>one column of 2.</span></div>
<div class="col-xs-10 right"><span>one column of 10.</span></div>
</div>
<div class="row 3and9">
<div class="col-xs-3 left"><span>one column of 3.</span></div>
<div class="col-xs-9 right"><span>one column of 9.</span></div>
</div>
<div class="row 4and8">
<div class="col-xs-4 left"><span>one column of 4.</span></div>
<div class="col-xs-8 right"><span>one column of 8.</span></div>
</div>
<div class="row 5and7">
<div class="col-xs-5 left"><span>one column of 5.</span></div>
<div class="col-xs-7 right"><span>one column of 7.</span></div>
</div>
<div class="row 6and6">
<div class="col-xs-6 left"><span>one column of 6.</span></div>
<div class="col-xs-6 right"><span>one column of 6.</span></div>
</div>
<div class="row 7and5">
<div class="col-xs-7 left"><span>one column of 7.</span></div>
<div class="col-xs-5 right"><span>one column of 5.</span></div>
</div>
<div class="row 8and4">
<div class="col-xs-8 left"><span>one column of 8.</span></div>
<div class="col-xs-4 right"><span>one column of 4.</span></div>
</div>
<div class="row 9and3">
<div class="col-xs-9 left"><span>one column of 9.</span></div>
<div class="col-xs-3 right"><span>one column of 3.</span></div>
</div>
<div class="row 10and2">
<div class="col-xs-10 left"><span>one column of 10</span>.</div>
<div class="col-xs-2 right"><span>one column of 2</span></div>
</div>
<div class="row 11and1">
<div class="col-xs-11 left"><span>one column of 11</span>.</div>
<div class="col-xs-1 right"><span>one column of 1</span></div>
</div>
<div class="row 12fullwidth">
<div class="col-xs-12 single"><span>one column of 12</span></div>
</div>
</div>
</body>
</html>
/*Downloaded from https://www.codeseek.co/-Infamous/understanding-bootstrap-columns-rows-and-containers-MoXzwz */
/*--------------------
CSS FOR BOOTSTRAP GRID
--------------------*/
.left, .right, .individual, .single {
height: 35px;
border: 1px solid grey;
display: flex;
justify-content: center;
align-items: center;
}
.left span, .right span, .individual span, .single span {
color: grey;
font-size: 12px;
text-transform: capitalize;
}
.individual {
background-color: rgba(0, 255, 0, 0.3);
}
.single {
background-color: rgba(255, 0, 0, 0.3);
}
.left {
background-color: rgba(255, 255, 0, 0.3);
}
.right {
background-color: rgba(255, 0, 255, 0.3);
}
/*--------------------
CSS FOR INFO CONTENT
--------------------*/
.landing-information {
height: 430px;
background-color: #3D3B44;
display: flex;
align-items: center;
justify-content: center;
}
.text-wrap {
text-align: center;
}
.text-wrap h1, .text-wrap h2, .text-wrap h3, .text-wrap p {
color: #CCA32C;
}
.text-wrap h1 {
font-size: 2.5vw;
text-decoration: overline;
}
.text-wrap h2 {
font-size: 1.3vw;
text-decoration: underline;
}
.text-wrap h3 {
font-size: 1vw;
}
.text-wrap p {
font-size: .8vw;
line-height: 20px;
}
@media screen and (max-width: 1210px) {
.left span, .right span, .individual span, .single span {
font-size: 10px;
}
.landing-information {
height: 350px;
}
}
@media screen and (max-width: 720px) {
.left span, .right span, .individual span, .single span {
font-size: 8px;
}
}
Bootstrap
Angular
ReactJS
jQuery
VueJS
HTML
CSS
JavaScript
Twitter Bootstrap
