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?
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>
<% } %>
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>