Create Responsive GridView using Bootstrap in HTML,PHP Example Tutorial

How to make fully responsive GridView in HTML page using row, col-sm class.

Grid view is basically used to show text or any other items into Grid formats. Bootstrap gives us the ability to add 12 gird view boxes into one row inside our HTML or PHP page. So developer can create 12 grid boxes into one single row. If developer wants to create 2 or 3 grid view then he can easily divide all 12 grid boxes into 3 by giving them others space. So here is the complete step by step tutorial for Create Responsive GridView using Bootstrap in HTML,PHP.

Create Responsive GridView using Bootstrap in HTML,PHP

How to Create Responsive GridView using Bootstrap in HTML,PHP.

GridView gives us 4 different type of classes for 4 views :

  • lg ( For large desktops ).
  • md ( For normal desktops ).
  • sm ( For tablets ).
  • xs ( For phones ).

GridView with all 12 columns classes code :

https://www.android-examples.com/demo/heading-tag.html
Code for GridView-all-box.html file.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>GridView with all 12 columns classes code</title>
</head>
 <meta name="viewport" content="width=device-width, initial-scale=1">
 
 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
 
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
 
</head>
<body>

<div class="container-fluid">
 <h1>Hello Developers</h1>
 <p>This is the Example of GridView with All Columns.</p>
 <div class="row">
 <div class="col-md-1" style="background-color:#00F3FF;">col-md-1</div>
 <div class="col-md-1" style="background-color:#E3F8F9;">col-md-1</div>
 <div class="col-md-1" style="background-color:#00F3FF;">col-md-1</div>
 <div class="col-md-1" style="background-color:#E3F8F9;">col-md-1</div>
 <div class="col-md-1" style="background-color:#00F3FF;">col-md-1</div>
 <div class="col-md-1" style="background-color:#E3F8F9;">col-md-1</div>
 <div class="col-md-1" style="background-color:#00F3FF;">col-md-1</div>
 <div class="col-md-1" style="background-color:#E3F8F9;">col-md-1</div>
 <div class="col-md-1" style="background-color:#00F3FF;">col-md-1</div>
 <div class="col-md-1" style="background-color:#E3F8F9;">col-md-1</div>
 <div class="col-md-1" style="background-color:#00F3FF;">col-md-1</div>
 <div class="col-md-1" style="background-color:#E3F8F9;">col-md-1</div>
 
 </div>
</div>
 
</body>
</html>

GridView with divide 12 columns into 3 similar parts.

https://www.android-examples.com/demo/heading-tag.html
Code for gridview-3-parts.html file.

 <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>GridView with divide 12 columns into 3 similar parts</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
 
 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
 
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
 
</head>
<body>

<div class="container-fluid">
 <h1>Hello Developers</h1>
 <p>GridView with divide 12 columns into 3 similar parts.</p>
 <div class="row">
 <div class="col-md-4" style="background-color:#00F3FF;">col-md-1</div>
 <div class="col-md-4" style="background-color:#E3F8F9;">col-md-1</div>
 <div class="col-md-4" style="background-color:#00F3FF;">col-md-1</div>

 </div>
</div>
 
</body>
</html>

Note : I am using col-md-4 class in this class col represents the grid view columns, md represents for normal desktops and 4 represents the number of column this particular column will occupy.