put cards into a row of 4 html css-CodePudding

I have this:

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

          <%for ( var j = 0; j < 4; j  ) { %>
    
            <div >
              <div >
            <div >
              <div >
                <h6 ><%= data[i].NOTES %></h6>
              </div>
              <div >
                <div >
                  <!-- <canvas id="myPieChart"> -->
                      <img src="https://images.unsplash.com/photo-1633113216120-53ca0a7be5bc?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHw=&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?

CodePudding user response：

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 >
            <%for ( var j = 0; j < 4; j  ) { %>
                <div >
                    <div >
                        <div >
                            <h6 ><%= data[i].NOTES %></h6>
                        </div>
                        <div >
                            <div >
                            <!-- <canvas id="myPieChart"> -->
                                <img src="https://images.unsplash.com/photo-1633113216120-53ca0a7be5bc?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHw=&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>
    <% } %>

CodePudding user response：

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

   <div >
      <div >
        <div >
          <div > <- Get your loop start from here
            HI
          </div>
        </div>
      </div>
    </div>