We recently were working on a project and we wanted to have a Bootstrap 4 div grid display like a table. To address this, we turned to the versatility of Bootstrap 4 Grid, utilizing the power of div elements to create a grid system that not only ensures a responsive layout but also mimics the aesthetic appeal of a table. By employing Bootstrap’s grid structure, we were able to tailor the display for both desktop and mobile environments, capitalizing on the strengths of each. Incorporating key features like table heads, striping, and hover effects, we aimed to strike a balance between the visual richness of tables and the practicality demanded by mobile users.

Of note, our solution involves strategically hiding table heads on mobile screens to enhance the overall mobile experience. We believe this example provides a valuable blueprint for implementing a Bootstrap div table, seamlessly merging the advantages of Bootstrap’s responsive design with the familiar and engaging feel of traditional tables.

Div Table Example HTML

Table Example CSS

row.table-head{color: #fff ; background: #71b802; padding: 1rem; font-weight: 500; text-transform: uppercase;}

.row.striped{color: #000; padding: 1rem; background: #90ea02;}

.row.striped:nth-child(odd){
  background: #c6fe6e;
}

.row.striped:focus,.row.striped:hover{
  background: #bcfd55;
}
@media (max-width: 767.98px) {row.table-head{display:none;} }

HTML

<div class="container">
    <div class="row table-head">
        <div class="col-md-4">
             Heading 1
        </div>
        <div class="col-md-4">
            Heading 2
        </div>
          <div class="col-md-4">
           Heading 3
        </div>
    </div>
    <div class="row striped">
       <div class="col-md-4">
            One
        </div>
         <div class="col-md-4">
            Two
        </div>
       <div class="col-md-4">
            Three
        </div>
    </div>
    <div class="row striped">
          <div class="col-md-4">
            Four
        </div>
         <div class="col-md-4">
            Five
        </div>
    <div class="col-md-4">
            Six
        </div>
    </div>
    <div class="row striped">
        <div class="col-md-4">
            Seven
        </div>
        <div class="col-md-4">
            Eight
        </div>
        <div class="col-md-4">
            Nine
        </div>
    </div>
</div>

In conclusion, by leveraging the power of Bootstrap and adopting a creative approach with custom styles, we’ve successfully transformed a traditional table structure into a responsive and visually appealing grid using the flexibility of div elements.

This Bootstrap-based approach allows for seamless adaptability to mobile devices while retaining the desired table-like styles such as striping, and hover effects. Bootstrap’s grid system and custom styling not only enhances the user experience but also ensures a harmonious display across various screen sizes, striking the perfect balance between functionality and aesthetics in our project.