Bootstrap y Masonry

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

Masonry no está incluido en Bootstrap. Añádelo incluyendo el plugin 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 añadir data-masonry='{"percentPosition": true }' al contenedor .row, podemos combinar las ventajas de la cuadrícula responsiva de Bootstrap y el posicionamiento de Masonry.


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

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

Una cita conocida, contenida en un elemento blockquote.

PlaceholderEncabezado de imagen
Título de tarjeta

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

Última actualización hace 3 minutos

Una cita conocida, contenida en un elemento blockquote.

Título de tarjeta

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

Última actualización hace 3 minutos

PlaceholderImagen de tarjeta

Una cita conocida, contenida en un elemento blockquote.

Título de tarjeta

Esta es otra tarjeta con título y texto de apoyo debajo. Esta tarjeta tiene contenido adicional para hacerla un poco más alta en general.

Última actualización hace 3 minutos