We recently were working on a project and we wanted to have a Bootstrap 4 Grid display like a table. One of the main reasons for this is for the mobile display. Tables work and look great on desktop but they are not always very mobile-friendly. The site that we are working with is table heavy but also geared towards mobile devices. We decided to use the Bootstrap grid but add some of the cool table-like styles such as table heads, striping and hovers.

Hopefully, this example will help you create Bootstrap grids that have the look and feel of tables. We are hiding the table heads on Mobile.

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>