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

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.

Like this Post? Share
  • Larry Wishon

    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

    • Amit Sonkhiya

      Thank you and you did well 🙂

  • Shailesh Shenoy

    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!

    • Amit Sonkhiya

      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.