Estoy haciendo una grilla con los estilos propios de bootstrap, sin embargo cuando utilizo col-sm-*
los div
están muy juntos y se pierde el efecto de shadow
que les puse, les he puesto un margin
a los div pero se desacomoda el último div
y se baja, eso no es lo que tenía en mente, he visto que se puede disfrazar con la propiedad border
igual al color de fondo del div padre pero esa propiedad la utilizo para otras cosas. He pensado en utilizar outline
para ver si puedo disfrazar esa propiedad para que tome el color de fondo, pero aún no me queda claro como funciona. Dejo un snippet de cómo se ve sin margin
y con margin
.
Ver el snippet en tamaño completo para ver bien los resultados
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-sm-4 shadow p-5 bg-light border">
COSILLAS
</div>
<div class="col-sm-4 shadow p-5 bg-light border">
COSILLAS
</div>
<div class="col-sm-4 shadow p-5 bg-light border">
COSILLAS
</div>
</div>
</div>
<hr>
<div class="container">
<div class="row">
<div class="col-sm-4 shadow p-5 bg-light border m-1">
COSILLAS
</div>
<div class="col-sm-4 shadow p-5 bg-light border m-1">
COSILLAS
</div>
<div class="col-sm-4 shadow p-5 bg-light border m-1">
COSILLAS
</div>
</div>
</div>