How to make large number of div boxes responsive in bootstrap 4?

Question

I have below HTML and CSS

<div class="">
      <div data-th-if="${foo.prop1}" class="data-box"> some data </div>
      <div data-th-if="${foo.prop2}" class="data-box"> some data </div>
      <div data-th-if="${foo.prop3}" class="data-box"> some data </div>
      <div data-th-if="${foo.prop4}" class="data-box"> some data </div>
      <div data-th-if="${foo.prop5}" class="data-box"> some data </div>
      <div data-th-if="${foo.prop6}" class="data-box"> some data </div>
      <div data-th-if="${foo.prop7}" class="data-box"> some data </div>
      <div data-th-if="${foo.prop1}" class="data-box"> some data </div>
      <div data-th-if="${foo.prop1}" class="data-box"> some data </div>
      <div data-th-if="${foo.prop1}" class="data-box"> some data </div>
      <div data-th-if="${foo.prop1}" class="data-box"> some data </div>
      <div data-th-if="${foo.prop1}" class="data-box"> some data </div>
      <div data-th-if="${foo.prop1}" class="data-box"> some data </div>
      <div data-th-if="${foo.prop1}" class="data-box"> some data </div>
      <div data-th-if="${foo.prop1}" class="data-box"> some data </div>
      <div data-th-if="${foo.prop1}" class="data-box"> some data </div>
      <div data-th-if="${foo.prop1}" class="data-box"> some data </div>
      <div data-th-if="${foo.prop1}" class="data-box"> some data </div>
      <div data-th-if="${foo.prop1}" class="data-box"> some data </div>
      <div data-th-if="${foo.prop1}" class="data-box"> some data </div>
      <div data-th-if="${foo.prop1}" class="data-box"> some data </div>
      <div data-th-if="${foo.prop1}" class="data-box"> some data </div>
      <div data-th-if="${foo.prop1}" class="data-box"> some data </div>
      <div data-th-if="${foo.prop1}" class="data-box"> some data </div>
      <div data-th-if="${foo.prop1}" class="data-box"> some data </div>
     .... more div continue
   </div>

this is CSS

   .data-box {
   width: 150px;
   background-color: yellow;
   margin-top: 0;
   margin-bottom: 5px;
   margin-left: 0; 
   margin-right: 5px;
   border: 1px solid red;
   }

There are variable of div that will be generated by the template depending incoming data values as shown.

I want to organize these div boxes such that desktop would have 5 div box, ipad would have 3 div boxes and phone would have two div boxes and very low resolution phone would have one div box in a row. How to achieve this using Boostrap 4 ?

score 1 · Accepted Answer · answered Apr 20 '18 at 11:00

you can add class "row wrap" on parent after that you can give the data-box any width you want in media queries.

  .data-box {
   width: 20%;
   background-color: yellow;
   margin-top: 0;
   margin-bottom: 5px;
   margin-left: 0; 
   margin-right: 5px;
   border: 1px solid red;
   }
   
   @media all and (max-width:1023){
    .data-box {width:33.33%}
   } 
@media all and (max-width:600){
    .data-box {width:50%}
   }
@media all and (max-width:420){
    .data-box {width:100%}
   }

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.0/css/bootstrap.css" rel="stylesheet"/>
<div class="row wrap mx-auto">
      <div data-th-if="${foo.prop1}" class="data-box"> some data </div>
      <div data-th-if="${foo.prop2}" class="data-box"> some data </div>
      <div data-th-if="${foo.prop3}" class="data-box"> some data </div>
      <div data-th-if="${foo.prop1}" class="data-box"> some data </div>
      <div data-th-if="${foo.prop1}" class="data-box"> some data </div>
      <div data-th-if="${foo.prop1}" class="data-box"> some data </div>
      <div data-th-if="${foo.prop1}" class="data-box"> some data </div>
      <div data-th-if="${foo.prop1}" class="data-box"> some data </div>
      <div data-th-if="${foo.prop1}" class="data-box"> some data </div>
      <div data-th-if="${foo.prop1}" class="data-box"> some data </div>
   </div>

There is requirement that div boxes (or can change to span boxes) must have fixed width and height. If there is extra space left after boxes have lined themselves in a row they are simply left aligned. — ace, Apr 20 '18 at 12:07
Try this one [link](https://stackoverflow.com/questions/29732575/line-break-in-multi-line-flexbox?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa) hope it helps, its breaking the boxes after every third item which you can do via css media queries — Piyush Verma, Apr 20 '18 at 12:21

How to make large number of div boxes responsive in bootstrap 4?

1 Answers1