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.


Placeholder Capa 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.

Placeholder Capa 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

Placeholder Card 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