12. Februar 2023

Masonry-Layout mit Bootstrap

Masonry-Layouts waren in der Vergangenheit nicht immer einfach umzusetzen. Mit Bootstrap 5 können einfach die gewohnten Col-Klassen benutzt werden und mit wenigen Zeichen Code in ein Masonry-Layout gewandelt werden.

<div class="row" data-masonry='{"percentPosition": true }'>
<div class="col-12 col-md-4 pb-4">
...

Hierfür muss natürlich das Masonry-Javascript geladen sein: https://masonry.desandro.com/