Bootstrap and Masonry

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

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


<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 contenedor .row, podemos combinar los poderes de la grilla responsive de Bootstrap y el posicionamiento de Masonry.


Marcador de posiciónImage cap
Título de la tarjeta que se ajusta a una nueva línea

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

Una cita muy conocida, contenida en un elemento blockquote.

Marcador de posiciónImage cap
Título de la tarjeta

Esta tarjeta tiene un texto de respaldo a continuación como una introducción natural al contenido adicional.

Última actualización hace 3 minutos

Una cita muy 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

Marcador de posiciónImagen de tarjeta

Una cita muy conocida, contenida en un elemento blockquote.

Título de la tarjeta

Esta es otra tarjeta con título y texto de respaldo a continuación. Esta tarjeta tiene contenido adicional para hacerla un poco más alta en general.

Última actualización hace 3 minutos