Tengo esto:
<% 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> <% } %> y funciona, muestra los valores de la base de datos, sin embargo, lo que debo hacer es ponerlos en una fila de 4. ahora mismo, lo que sucede es que la nueva tarjeta que se genera al insertar un nuevo archivo en el db se carga justo debajo de él en lugar de al lado como una fila. Solo estoy usando bootstrap , y esperaba poder agregar un CSS personalizado, pero no estoy seguro de por dónde empezar. ¿Cómo haría esto?
No sé cuál es el resto del código, pero para que col funcione, debe envolverlo en row como un elemento secundario directo. Cambia tu código a:
<% 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> <% } %>Esto es lo que estás buscando. Creará 4 tarjetas en cada una de las filas para pantallas más grandes y superiores.
<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>