I’m making a respond task as well as I’m attempting to utilize bootstrap to make cards for each and every product “Producto”.
This is exactly how I’m providing it (I have actually left out a few of the item information so it’s simpler to check out):
<< div className=" container bg-color-tienda">>.
<< div className=" facility">
> {isLoading? << h1>> CARGANDO PRODUCTOS<: void}
{! isLoading && & & productos & & productos.length
<==>= 0?(. < h5>> No hay productos .
): void} {!& isLoading & & productos & & productos.length > 0?(. < div className=" row">
> {productos.map(( producto) => > {
return (.
<< div className=" col" secret= {producto.id} >>.
<< div className=" single-producto">
<> < div className=" card">
> {/ * Thumbnail */}
<< div className=" producto-thumb">
> {producto.publico === incorrect? (.
<< div className=" producto-tag">> No Publicado<.
): void}
<< div className=" recipe-image-box">
> {producto.imageUrl? (.
<< img.
src= {producto.imageUrl}
alt= {producto.name}
className=" recipe-image"
/>>.
): void}
<.
<.
<.
<.
<.
);
})}
<.
): void}
<.
<;.
The important things is, my custom-made CSS appears to be tinkering the column system. The left cushioning appears to be missing out on, while the best cushioning has actually raised. This is what it appears like:.
As you can see, the left cushioning is no place to be seen, while the best cushioning is.
This imparity is taken care of when I eliminate this product from my custom-made CSS, which I utilize:
single-producto {
size: 350px;.
border-radius: 1rem;.
box-shadow: 0 5px 15px rgb( 0 0 0/ 5%);.
margin-bottom: 30px;.
}
Outcome:.
I wish you can aid me, many thanks!
