You can break out of the bootstrap container using the breakout-container class

When to use: Add it to a section to make a full width background color

When not to: When you have other columns this will overlay above them..

Notes: Use with caution!

This checkerboard pattern alternates between images and content areas. This is primarily used on marketing/landing pages, its visually appealing but increases cognitive load on the visitor. Add the .swap class to .checker-board-wrapper to have it swap the pattern of how it alternates.

When to use: When the main purpose of the content is to sell something or re-enforce an idea in a visually attractive way.

When not to: If pages main objective is for a user to accomplish a goal then this adds "noise" and may impede that pages objective.

Notes: Best when used with 2-5 row increments. Be sure pictures meaningfully support the text content and aren't just pretty visuals.

Bootstrap 4 Grid system where rows wrap columns that behaves like flexbox unless otherwise specified. Use .spacer inside a .d-flex to easily space items.

When to use: When you want layouts and want

When not to: For simple lists, semantic list are best.

Notes: Details at Bootstrap Docs, ALWAYS test on MOBILE

A General purpose padding class for elements.

Notes: More spacing utilities provided by Bootstrap