O'Reilly logo

Bootstrap 4 Site Blueprints by Ian Whitley, David Cochran, Bass Jobsen

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Using the masonry template

A masonry grid layout works by placing elements in an optimal position based on available vertical space, sort of like a mason fitting stones in a wall. The Cards module of Bootstrap enables you to organize elements (cards) into masonry-like columns with just CSS. The Card module is a flexible and extensible content container. It replaces the panels, thumbnails, and wells used in earlier versions of Bootstrap.

The JBST 4 theme already contains a template for you, which organizes your post into masonry-like columns.

You can test the masonry template on your front page by copying the template-masonry file to the front-page.php file. Or select a page using this template as your front page.

The CSS code to display the masonry ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required