Display Data in Responsive Columns from Database using PHP

There is a post on this blog with code to fetch data from database and show them in PHP website as table where each row has a equal number of columns and each column contains data related to specific product or in another way each database row has to be represented by a column in PHP table.

As responsive design has come into trends, I decided to write this post to display Data in Responsive Columns from Database using PHP. Like the image below, a product catalog would be good example of this where columns adjust them automatically to maintain responsiveness with different screen sizes.

Display Data in Responsive Columns from Database

There is code below with comments to let you understand this and I’m also explaining that in a while. The key feature is that you have to just assign names of container, rows and columns classes as well as number of columns to show in each row according to your chosen framework (Bootstrap, Skeleton, Foundation or your own) & the code will start displaying data in responsive columns.

<?Php
	$connection = new mysqli('HOST_NAME', 'USER_NAME', 'PASSWORD', 'DATABASE_NAME');
	
	if ($connection->connect_errno > 0) {
		die ('Unable to connect to database [' . $connection->connect_error . ']');
	}	
	$sql = "SELECT * FROM products";
	if (!$result = $connection->query($sql)) {
    	die ('There was an error running query[' . $connection->error . ']');
	}	
?>
...
<?php
	$rows = $result->num_rows;    // Find total rows returned by database
	if($rows > 0) {
		$cols = 3;    // Define number of columns
		$counter = 1;     // Counter used to identify if we need to start or end a row
		$nbsp = $cols - ($rows % $cols);    // Calculate the number of blank columns
		
		$container_class = 'container-fluid';  // Parent container class name
		$row_class = 'row';    // Row class name
		$col_class = 'col-sm-4'; // Column class name

        echo '<div class="'.$container_class.'">';    // Container open
		while ($item = $result->fetch_array()) {
			if(($counter % $cols) == 1) {    // Check if it's new row
				echo '<div class="'.$row_class.'">';	// Start a new row
			}
                   	$img = "http://yourdomain.com/assets/".$item['image_name'];
					echo '<div class="'.$col_class.'"><img src="'.$img.'" alt="'.$item['name'].'" /><h5>'.$item['name'].'</h5></div>';     // Column with content
			if(($counter % $cols) == 0) { // If it's last column in each row then counter remainder will be zero
				echo '</div>';	 //  Close the row
			}
			$counter++;    // Increase the counter
		}
		$result->free();
		if($nbsp > 0) { // Adjustment to add unused column in last row if they exist
			for ($i = 0; $i < $nbsp; $i++)	{ 
				echo '<div class="'.$col_class.'">&nbsp;</div>';		
			}
			echo '</div>';  // Close the row
		}
        echo '</div>';  // Close the container
	}
?>

<?Php

$connection = new mysqli('HOST_NAME', 'USER_NAME', 'PASSWORD', 'DATABASE_NAME');

if ($connection->connect_errno > 0) {

die ('Unable to connect to database [' . $connection->connect_error . ']');

}

$sql = "SELECT * FROM products";

if (!$result = $connection->query($sql)) {

die ('There was an error running query[' . $connection->error . ']');

}

...

<?php

$rows = $result->num_rows; // Find total rows returned by database

if($rows > 0) {

$cols = 3; // Define number of columns

$counter = 1; // Counter used to identify if we need to start or end a row

$nbsp = $cols - ($rows % $cols); // Calculate the number of blank columns

$container_class = 'container-fluid'; // Parent container class name

$row_class = 'row'; // Row class name

$col_class = 'col-sm-4'; // Column class name

echo '<div class="'.$container_class.'">'; // Container open

while ($item = $result->fetch_array()) {

if(($counter % $cols) == 1) { // Check if it's new row

echo '<div class="'.$row_class.'">'; // Start a new row

}

$img = "http://yourdomain.com/assets/".$item['image_name'];

echo '<div class="'.$col_class.'"><img src="'.$img.'" alt="'.$item['name'].'" /><h5>'.$item['name'].'</h5></div>'; // Column with content

if(($counter % $cols) == 0) { // If it's last column in each row then counter remainder will be zero

echo '</div>'; // Close the row

}

$counter++; // Increase the counter

}

$result->free();

if($nbsp > 0) { // Adjustment to add unused column in last row if they exist

for ($i = 0; $i < $nbsp; $i++) {

echo '<div class="'.$col_class.'"> </div>';

}

echo '</div>'; // Close the row

}

echo '</div>'; // Close the container

}

First 12 lines (0 – 11) are regular code to fetch data from database.

Line #16 defines number for columns to show in each row while line #20, #21 and #22 are names of corresponding classes available in your framework to display a parent container, row and column. I’m using Twitter Bootstrap’s Grid System to define classes in our example above.

Twitter Bootstrap divides screen as a grid of 12 columns and you can notice that I have defined 3 columns ($cols) to display in each row so I have used ‘col-sm-4‘ for $col_class. You have to assign correct number of columns to show in a row ($cols) and right class name for columns ($col_class) as defined in your CSS.

If you don’t wish to add a parent container around the grid, you can delete lines #20, #24 and #43.

Lines #15 – #44 are PHP script that creates responsive grid dynamically to display the data fetched from database. The whole trick is to use bit maths to create a new row div each time after reaching to assigned number of columns in existing one and close it as well. Code #37 – #41 executes only when the if condition in line #31 fails and there are unused columns left for last row in the responsive grid of product catalog, generating necessary empty columns and closing the last row smartly.

So in last you need to configure the following lines & variables:

LINES #0 - #11 TO FETCH DATA FROM DATABASE

$cols = 3;    // Define number of columns in each row

$container_class = 'container-fluid';  // Parent container class name

$row_class = 'row';    // Row class name

$col_class = 'col-sm-4'; // Column class name

LINE #30 IN THE MANNER YOU WISH TO DISPLAY EACH ITEM

LINES #0 - #11 TO FETCH DATA FROM DATABASE

$cols = 3; // Define number of columns in each row

$container_class = 'container-fluid'; // Parent container class name

$row_class = 'row'; // Row class name

$col_class = 'col-sm-4'; // Column class name

LINE #30 IN THE MANNER YOU WISH TO DISPLAY EACH ITEM

If you feel any difficulty or have any question or feedback regarding display data in responsive columns from database using PHP, plese write to us using the comment form below.

16 COMMENTS

Abida Ismail says:
August 20, 2018 at 10:41 pm
Hi Amit ,
Can u please tell me what exactly is line 35 for i.e $result->free();Correct me if its to clear the results that you have obtained.
dede suryadi says:
August 17, 2017 at 5:59 am
https://uploads.disquscdn.com/images/7511ebc30dfc9b681adc881cc89973a9d0a975f0d7cc870b2a8011af5acafea7.png https://uploads.disquscdn.com/images/bfd8d74478e290be7e61f9745d3cb852c92c97cdcbd6ab48003884137b3baf63.png
sir i has made this code , but it can’t display image but just display image name , here is my code
$img = “http://localhost/kp3/admin/files/”.$item[‘foto’];
echo ‘
‘.$item[‘physical_harware_name’].”; // Column with content
1. Amit Sonkhiya says:
  August 17, 2017 at 11:14 am
  Hi @disqus_77mltTLpsI:disqus
  If you are getting image name, not actual image, that means you’re getting alt attribute. I’m doubtful your image path is wrong or image is not present at that location. Open link
  http://localhost/kp3/admin/files/5.jpg
  1
  http://localhost/kp3/admin/files/5.jpg
  in a new browser window and check if you get image.
Hanamichi Sakuragi says:
August 15, 2017 at 12:00 am
sir can you please explain this line of codes “$img = “http://yourdomain.com/assets/”.$row[‘image_name’];” cause i cant show the images and what data should i enter in the database. this is the location of my images, src=”imgreyvibal.jpg”..
1. Amit Sonkhiya says:
  August 15, 2017 at 11:22 am
  Hello @disqus_OQ4zLLWHGv:disqus
  Replace
  http://yourdomain.com/
  1
  http://yourdomain.com/
  with url of your domain or localhost project path, generally like
  http://localhost/folder_name/
  1
  http://localhost/folder_name/
  with trailing slash.
  assets is the folder where I store all images.
  Also you are using relative path which is bad and might fail. So it should be img/reyvibal.jpg, not imgreyvibal.jpg (you’re using forward slash, I have used back slash). Also read about absolute url and relative url and always use absolute url.
  So your code should be like (if image_name contains img/reyvibal.jpg):
  $img = "http://localhost/folder_name/".$item['image_name'];
  1
  $img = "http://localhost/folder_name/".$item['image_name'];
  Or better if I assume you are saving all images in img folder and your project name is “test”, it should be
  $url = "http://localhost/test/img/"; $img = $url.$item['image_name'];
  1
  2
  3
  4
  
  $url = "http://localhost/test/img/";
  $img = $url.$item['image_name'];
  
  Now you can just save reyvibal.jpg under column image_name in database and actual image in img folder
  1. Hanamichi Sakuragi says:
    August 15, 2017 at 3:53 pm
    thank you kind sir now i understand it and about the absolute url, ill be sure to read it.
    1. Amit Sonkhiya says:
      August 16, 2017 at 9:39 am
      Thanks, a like and sharing appreciated
2. Amit Sonkhiya says:
  August 15, 2017 at 12:58 pm
  I have updated the code as I forgot to add src tag there. Thanks for the question
Haig Hamamgian says:
August 8, 2017 at 1:54 am
Will this work with Flexbox? Would anything have to be changed? Also what are the database table field names used in you example above.
1. Amit Sonkhiya says:
  August 8, 2017 at 9:50 am
  Hi @haighamamgian:disqus
  I’m not sure if it will work with Flexbox or not. I haven’t tested it yet. Change the code according to Flexbox and would appreciate you if you can send me the code. If you find any difficulty, surely let me know.
  In the example table fields names are “image_name” and “name” respectively at line #29-30
kyawlwinsoe says:
March 3, 2017 at 2:08 pm
can’t get image from image folder! $img = “http://yourdomain.com/assets/”.$item[‘image_name’];
1. Amit Sonkhiya says:
  March 4, 2017 at 10:18 am
  @kyawlwinsoe you would need to modify script to match with records in database. The example code doesn’t consist everything. We hope you have some prior knowledge about php & MySQL before applying code from this article
Shailesh Shenoy says:
October 25, 2016 at 8:10 pm
Hey I am a total beginner and i need something like this for my college project so please help!
What is the$item array? Ad i dont even have any images in my database so i dont know what to do about images.
I’m so confused, this stuff is hella tough!
1. Amit Sonkhiya says:
  October 25, 2016 at 10:43 pm
  Hi Shailesh,
  In while loop, we are assigning a row of database to $item each time, just like traversing each row of database. And in this way $item holds all DB columns as an array (for one row at a time).
  Regarding image,the easiest way for you is change line #29 with below:
  $img = $item[‘COLUMN_NAME_FROM_DATABASE_YOU_WANT_TO_SHOW’];
  As you are beginner, I would suggest you to get some hand dirty in PHP-MySQL.
Larry Wishon says:
June 25, 2015 at 6:49 pm
Amit,
Thanks for your work on this. I am sure this will be very handy for many like myself. I was able to get it to work from the previous tut where you used tables. I made some adjustments to make it work with my responsive framework (Toast) and it is working very well now.
Thanks again for your help and I will probably be coming back to this from time to time.
Larry
1. Amit Sonkhiya says:
  June 26, 2015 at 10:26 am
  Thank you and you did well 🙂

Display Data in Responsive Columns from Database

16 COMMENTS

Leave a Reply Cancel reply