Bootstrap Grid System
What is a Grid?
The Grid system play important role to create consistent layout of website. Basically Grid is a structure (usually two-dimensional) which made up of a series of intersecting straight (vertical, horizontal) lines used to structure the content. You can use only 12 columns across the page with in different ways.
How Bootstrap Grid System is working?
You should use .container class in first div of html document for proper alignment of web page.
Rows div must be placed within a .container class for proper alignment and padding.
Rows are used to create horizontal groups of columns.
You should write HTML Content within the columns, and only columns may be the immediate children of rows.
There are some predefined classes like as .row and .col-xs-4 that are used to make grid layouts very fast.
Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and the last column via negative margin on .rows.
Grid columns are describe the Grid layout of the web page. Grid columns are created by specifying the number of twelve available columns. You can use various kind of Grid layout to create web layout as you want. The following examples of Grid layouts.
Example of Code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<div class="Bootstrap-Grid-System">
<body>
<div class="container-fluid">
<h4>Examples of Grid layouts</h4>
<div class="row">
<div class="col-sm-4" style="background-color:white;">.col-sm-4</div>
<div class="col-sm-4" style="background-color:grey;">.col-sm-4</div>
<div class="col-sm-4" style="background-color:white;">.col-sm-4</div>
</div>
<br/>
<div class="row">
<div class="col-sm-6" style="background-color:white;">.col-sm-6</div>
<div class="col-sm-6" style="background-color:grey;">.col-sm-6</div>
</div>
<br/>
<div class="row">
<div class="col-sm-2" style="background-color:white;">.col-sm-2</div>
<div class="col-sm-2" style="background-color:grey;">.col-sm-2</div>
<div class="col-sm-2" style="background-color:white;">.col-sm-2</div>
<div class="col-sm-2" style="background-color:grey;">.col-sm-2</div>
<div class="col-sm-2" style="background-color:white;">.col-sm-2</div>
<div class="col-sm-2" style="background-color:grey;">.col-sm-2</div>
</div>
<br/>
<div class="row">
<div class="col-sm-1" style="background-color:white;">.col-sm-1</div>
<div class="col-sm-1" style="background-color:grey;">.col-sm-1</div>
<div class="col-sm-1" style="background-color:white;">.col-sm-1</div>
<div class="col-sm-1" style="background-color:grey;">.col-sm-1</div>
<div class="col-sm-1" style="background-color:white;">.col-sm-1</div>
<div class="col-sm-1" style="background-color:grey;">.col-sm-1</div>
<div class="col-sm-1" style="background-color:white;">.col-sm-1</div>
<div class="col-sm-1" style="background-color:grey;">.col-sm-1</div>
<div class="col-sm-1" style="background-color:white;">.col-sm-1</div>
<div class="col-sm-1" style="background-color:grey;">.col-sm-1</div>
<div class="col-sm-1" style="background-color:white;">.col-sm-1</div>
<div class="col-sm-1" style="background-color:grey;">.col-sm-1</div>
</div>
</div>
</body>
</div>
Output
Bootstrap Example Examples of Grid layouts
.col-sm-4.col-sm-4.col-sm-4
.col-sm-6.col-sm-6
.col-sm-2.col-sm-2.col-sm-2.col-sm-2.col-sm-2.col-sm-2
.col-sm-1.col-sm-1.col-sm-1.col-sm-1.col-sm-1.col-sm-1.col-sm-1.col-sm-1.col-sm-1.col-sm-1.col-sm-1.col-sm-1Media Queries
Media query is a conditional CSS rule. It is used to apply CSS style based on certain condition. The CSS style applied only when certain condition would be true.
By using media queries you can change the content style based on the viewport size. There are following viewport of media query that you can use.
<iframe src="http://schools.inimisttech.com/tutorial/topic/Bootstrap/Bootstrap-Grid-System">
<style>
body {
background-color: grey;
}
/* smartphones, portrait iPhone, portrait 480x320 phones (Android) */
@media only screen and (max-width: 320px) {
body {
background-color: red;
}
}
/* smartphones, Android phones, landscape iPhone */
@media only screen and (max-width: 480px) {
body {
background-color: brown;
}
}
/* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
/* tablet, landscape iPad, lo-res laptops ands desktops */
@media only screen and (max-width: 801px) {
body {
background-color: lightyellow;
}
}
/* big landscape tablets, laptops, and desktops */
@media only screen and (max-width: 1025px) {
body {
background-color: lightblue;
}
}
/* hi-res laptops and desktops */
@media only screen and (max-width: 1281px) {
body {
background-color: lightblue;
}
}
</style>
</iframe>
<p>If you want to check the media query then you must be Resize the browser window. Backgroud-color would be changed automatically according to the size of viewport.</p>
- Free Project
- Stripe gateway integration demo with PHP