put cards into a row of 4 html css

Question

I have this:

<% if(data.length){ 
        var i = 0;
        while (i < data.length) { %>

          <%for ( var j = 0; j < 4; j++) { %>
    
            <div class="text-center">
              <div class="col-lg-4">
            <div class="card shadow mb-4">
              <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold text-primary"><%= data[i].NOTES %></h6>
              </div>
              <div class="card-body">
                <div class="chart-pie pt-4">
                  <!-- <canvas id="myPieChart"> -->
                      <img src="https://images.unsplash.com/photo-1633113216120-53ca0a7be5bc?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=900&q=60" id="donutimage">
                  <!-- </canvas> -->
                </div>
                <hr>
                Styling for the donut chart can be found in the <code>/js/demo/chart-pie-demo.js</code> file.
              </div>
            </div>
          </div>
        </div>
          <% i++;
          if (i >= data.length){
            j = 4;
          }
          } %>
        <% } 
        }else{ %>
        <p>Unfortunately, no results were found. Please try again or contact an admin if you believe this is an erorr.</p>
        <% } %>

and it works, it displays the values of the database, however, what I need to do is put them into a row of 4. right now, what is happening is that the new card that is generated upon a new file being inserted into the db is loading right below it instead of beside it like a row. I am just using bootstrap, and I was hoping I could add some custom css, but I am not sure where to start. how would I do this?

You can just do it with css https://stackoverflow.com/questions/29546550/flexbox-4-items-per-row — epascarello, Jan 07 '22 at 19:16

score 1 · Accepted Answer · answered Jan 07 '22 at 19:29

I don't know what your rest of the code is, but for col to work, you need to wrap it in row as a direct child. Change your code to:

<% if(data.length) { 
    var i = 0;
    while (i < data.length) { %>
        <div class="row">
            <%for ( var j = 0; j < 4; j++) { %>
                <div class="col-lg-3 text-center">
                    <div class="card shadow mb-4">
                        <div class="card-header py-3">
                            <h6 class="m-0 font-weight-bold text-primary"><%= data[i].NOTES %></h6>
                        </div>
                        <div class="card-body">
                            <div class="chart-pie pt-4">
                            <!-- <canvas id="myPieChart"> -->
                                <img src="https://images.unsplash.com/photo-1633113216120-53ca0a7be5bc?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=900&q=60" id="donutimage">
                            <!-- </canvas> -->
                            </div>
                            <hr>
                            Styling for the donut chart can be found in the                  <code>/js/demo/chart-pie-demo.js</code> file.
                        </div>
                    </div>
                </div>
                <% i++;
                    if (i >= data.length){
                        j = 4;
                    }
                } %>
            </div>
        <% } 
    } else { %>
        <p>Unfortunately, no results were found. Please try again or contact an admin if you believe this is an erorr.</p>
    <% } %>

score 1 · Answer 2 · answered Jan 07 '22 at 19:30

This is the thing you are looking for. It will create 4 cards in each of the row for larger screens and above-

   <div class="row">
      <div class="col-md-12">
        <div class="row">
          <div class="col-lg-3 mb-4"> <- Get your loop start from here
            HI
          </div>
        </div>
      </div>
    </div>

put cards into a row of 4 html css

2 Answers2