Bootstrap et maçonnerie

Intégrez Masonry au système de grille Bootstrap et au composant de cartes.

La maçonnerie n'est pas incluse dans Bootstrap. Ajoutez-le en incluant le plugin JavaScript manuellement, ou en utilisant un CDN comme ceci :


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

En ajoutant data-masonry='{"percentPosition": true }'à l' .rowemballage, nous pouvons combiner les pouvoirs de la grille réactive de Bootstrap et le positionnement de Masonry.


Placeholder Image cap
Titre de la carte qui se termine sur une nouvelle ligne

Il s'agit d'une carte plus longue avec un texte de support ci-dessous comme introduction naturelle à du contenu supplémentaire. Ce contenu est un peu plus long.

Une citation bien connue, contenue dans un élément blockquote.

Placeholder Image cap
Titre de la carte

Cette carte est accompagnée d'un texte d'accompagnement ci-dessous comme introduction naturelle à du contenu supplémentaire.

Dernière mise à jour il y a 3 minutes

Une citation bien connue, contenue dans un élément blockquote.

Titre de la carte

Cette carte a un titre normal et un court paragraphe de texte en dessous.

Dernière mise à jour il y a 3 minutes

Placeholder Card image

Une citation bien connue, contenue dans un élément blockquote.

Titre de la carte

Il s'agit d'une autre carte avec le titre et le texte de support ci-dessous. Cette carte a du contenu supplémentaire pour la rendre légèrement plus grande dans l'ensemble.

Dernière mise à jour il y a 3 minutes