Bootstrap ug Masonry

I- integrate ang Masonry sa Bootstrap grid system ug mga card component.

Ang Masonry wala gilakip sa Bootstrap. Idugang kini pinaagi sa paglakip sa JavaScript plugin nga mano-mano, o paggamit sa CDN sama niini:


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

Pinaagi sa pagdugang data-masonry='{"percentPosition": true }'sa .rowwrapper, mahimo natong ikombinar ang mga gahum sa responsive grid sa Bootstrap ug ang positioning sa Masonry.

Placeholder Image cap
Titulo sa kard nga giputos sa bag-ong linya

Kini usa ka mas taas nga kard nga adunay suporta nga teksto sa ubos ingon usa ka natural nga lead-in sa dugang nga sulud. Kini nga sulod mas taas og gamay.

Usa ka ilado nga kinutlo, nga anaa sa elemento sa blockquote.

Usa ka tawo nga bantog sa Source Title
Placeholder Image cap
Titulo sa kard

Kini nga kard adunay suporta nga teksto sa ubos ingon usa ka natural nga lead-in sa dugang nga sulud.

Katapusang gi-update 3 ka minuto ang milabay

Usa ka ilado nga kinutlo, nga anaa sa elemento sa blockquote.

Usa ka tawo nga bantog sa Source Title
Titulo sa kard

Kini nga kard adunay regular nga titulo ug mubo nga parapo sa teksto sa ubos niini.

Katapusang gi-update 3 ka minuto ang milabay

Placeholder Card image

Usa ka ilado nga kinutlo, nga anaa sa elemento sa blockquote.

Usa ka tawo nga bantog sa Source Title
Titulo sa kard

Kini ang lain nga kard nga adunay titulo ug pagsuporta sa teksto sa ubos. Kini nga kard adunay pipila ka dugang nga sulud aron mahimo kini nga mas taas nga gamay sa kinatibuk-an.

Katapusang gi-update 3 ka minuto ang milabay