Bootstrap y Masonry

Integra Masonry con el sistema de cuadrícula Bootstrap y el componente Card.

Masonry no está incluido en Bootstrap. Agrégalo incluyendo el complemento de JavaScript manualmente o usando un CDN como este:


<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/masonry.pkgd.min.js" integrity="sha384-GNFwBvfVxBkLMJpYMOABq3c+d3KnQxudP/mGPkzpZSTYykLBNsZEnG2D9G/X/+7D" crossorigin="anonymous" async></script>
  

Al agregar data-masonry='{"percentPosition": true }' al envoltorio .row, podemos combinar los poderes de la cuadrícula responsive de Bootstrap y el posicionamiento de Masonry.


PlaceholderCapa de imagen
Título de la tarjeta que se ajusta a una nueva línea

Esta es una tarjeta más larga con texto de apoyo a continuación como introducción natural a contenido adicional. Este contenido es un poco más largo.

Una cita conocida, contenida en un elemento blockquote.

PlaceholderCapa de imagen
Título de la tarjeta

Esta tarjeta tiene texto de apoyo a continuación como introducción natural a contenido adicional.

Última actualización hace 3 minutos

Una cita conocida, contenida en un elemento blockquote.

Título de la tarjeta

Esta tarjeta tiene un título normal y un breve párrafo de texto debajo.

Última actualización hace 3 minutos

PlaceholderCard image

Una cita conocida, contenida en un elemento blockquote.

Título de la tarjeta

Esta es otra tarjeta con título y texto de apoyo a continuación. Esta tarjeta tiene algo de contenido adicional para hacerlo un poco más alto en general.

Última actualización hace 3 minutos