Create multiple Rows in GridView using Bootstrap classes in HTML,PHP Example Tutorial

How to make multiple rows inside HTML,PHP page using bootstrap row class.

In this tutorial we are creating a simple gridview with multiple rows inside it using Bootstrap row class. We are making only 2 columns inside each row but you can make more than 12 columns as per your project requires. So here is the complete step by step tutorial for Create multiple Rows in GridView using Bootstrap classes in HTML,PHP Example Tutorial.

Create multiple Rows in GridView using Bootstrap classes in HTML,PHP Example Tutorial

How to Create multiple Rows in GridView using Bootstrap classes in HTML,PHP Example Tutorial.

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

 <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Create multiple Rows in GridView using Bootstrap classes</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>Create multiple Rows in GridView using Bootstrap classes in HTML,PHP Example Tutorial.</p>
 
 <div class="row">
 <div class="col-md-6" style="background-color:#FFCDD2;">col-md-6</div>
 <div class="col-md-6" style="background-color:#E1BEE7;">col-md-6</div>
 </div>
 
 <div class="row">
 <div class="col-md-6" style="background-color:#FF4081;">col-md-6</div>
 <div class="col-md-6" style="background-color:#BBDEFB;">col-md-</div>

 </div>
 
 <div class="row">
 <div class="col-md-6" style="background-color:#FFCDD2;">col-md-6</div>
 <div class="col-md-6" style="background-color:#E1BEE7;">col-md-6</div>
 </div>
 
 <div class="row">
 <div class="col-md-6" style="background-color:#FF4081;">col-md-6</div>
 <div class="col-md-6" style="background-color:#BBDEFB;">col-md-</div>

 </div>
 
 <div class="row">
 <div class="col-md-6" style="background-color:#FFCDD2;">col-md-6</div>
 <div class="col-md-6" style="background-color:#E1BEE7;">col-md-6</div>
 </div>
 
 <div class="row">
 <div class="col-md-6" style="background-color:#FF4081;">col-md-6</div>
 <div class="col-md-6" style="background-color:#BBDEFB;">col-md-</div>

 </div>
</div>

</body>
</html>

 

Leave a Reply

Your email address will not be published. Required fields are marked *