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.

isplay Data in Multiple Columns

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.

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:

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.

You Might Interested In

16 COMMENTS

  1. Abida Ismail says:

    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.

    Reply
  2. dede suryadi says:

    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

    Reply
    1. Amit Sonkhiya says:

      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

      in a new browser window and check if you get image.

      Reply
  3. Hanamichi Sakuragi says:

    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”..

    Reply
    1. Amit Sonkhiya says:

      Hello @disqus_OQ4zLLWHGv:disqus

      Replace

      with url of your domain or localhost project path, generally like

      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):

      Or better if I assume you are saving all images in img folder and your project name is “test”, it should be

      Now you can just save reyvibal.jpg under column image_name in database and actual image in img folder

      Reply
  4. Haig Hamamgian says:

    Will this work with Flexbox? Would anything have to be changed? Also what are the database table field names used in you example above.

    Reply
    1. Amit Sonkhiya says:

      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

      Reply
    1. Amit Sonkhiya says:

      @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

      Reply
  5. Shailesh Shenoy says:

    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!

    Reply
    1. Amit Sonkhiya says:

      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.

      Reply
  6. Larry Wishon says:

    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

    Reply

Leave a Reply

Enclose a code block like: <pre><code>Your Code Snippet</code></pre>.