raybo.org/bootstrap4layouts

Learn to build practical Bootstrap 4 layouts using the grid, flex classes and utlity classes with these sample layout components. Each component is wrapped in an individual section class so you can copy, paste and customize them into your own layouts.

Github Repo

Multi-column

This layout uses multiple column rules so that how many columns each group takes depends on the width of the browser, by also using the justify-content-center class on the row, using less than 12 columns results in a centered set of columns. The rules used are col-10 col-md-6 col-lg-4 col-xl-3.

sample image
Text Heading
sample image
Text Heading
sample image
Text Heading
sample image
Text Heading
sample image
Text Heading
sample image
Text Heading
sample image
Text Heading
sample image
Text Heading
sample image
Text Heading
sample image
Text Heading
sample image
Text Heading
sample image
Text Heading

Media

A quick way two column pattern that shows an image next to a photo. In bootstrap 4, you gain the ability to center elements using flexbox classes. A couple of things to watch out for is that these will always render as single columns and can sometimes be too wide, so these particular media elements are inside an 8 column grid.

Photo Grid

A photo grid creates an edge to edge layout with a grid of photos.

sample image
sample image
sample image
sample image
sample image
sample image
sample image
sample image
sample image
sample image
sample image
sample image
Photo placeholder

Nested

Fuga possimus aliquam repudiandae, aspernatur quam velit cupiditate nihil beatae eum ipsa consequuntur itaque doloremque! Consequatur consequuntur nesciunt perferendis in illum excepturi nisi, eius totam ducimus nemo. Libero, accusantium tempore?

Photo placeholder

Nested

Fuga possimus aliquam repudiandae, aspernatur quam velit cupiditate nihil beatae eum ipsa consequuntur itaque doloremque! Consequatur consequuntur nesciunt perferendis in illum excepturi nisi, eius totam ducimus nemo. Libero, accusantium tempore?

Icon One

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perspiciatis doloremque possimus dignissimos illo praesentium id consectetur tempora dolorum! Vel sapiente vitae, deserunt minima et rem accusamus?

Icon Two

Dolorem repudiandae ipsa fugit distinctio modi earum dicta eum tenetur, vel temporibus laudantium totam libero odit ex labore commodi maiores molestias. Quo, hic maxime. Accusantium impedit dolorem cum error?

Icon Three

Et, alias asperiores? Repellat repudiandae, eum temporibus quibusdam iure, recusandae illo nesciunt, doloremque eligendi maiores tempora eos aliquid minus iusto ipsum facere. Minus, vitae autem dolores vero dolore?

Photo Sample

Floater Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis fuga ex delectus sunt natus doloremque praesentium aspernatur, totam tempora officia, sed fugit? Libero voluptatem nulla mollitia, amet dolor iste magni.

Photo Sample

Card Title

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint dolorem dolores consequatur ducimus nisi quos saepe error quo praesentium, recusandae aliquam repudiandae.

Photo Sample

Card Title

Impedit autem ea delectus repudiandae iste commodi a natus aspernatur culpa accusantium, hic, ullam molestiae ratione perspiciatis sit?

Photo Sample

Card Title

Magnam dolorem consectetur, soluta omnis quis eveniet dignissimos dolores mollitia sunt praesentium quo fugiat? Eius ab in mollitia minus ad quisquam eum!