CheatSheetsHero

Catalog / Bootstrap 5 Cheat Sheet

Bootstrap 5 Cheat Sheet

A quick reference guide for Bootstrap 5, covering its key components, classes, and utilities for building responsive web layouts.

Grid System

Basic Structure

Bootstrap’s grid system uses a series of containers, rows, and columns to layout and align content. It’s built with flexbox and is fully responsive.

.container - Provides a responsive fixed width container.
.container-fluid - Provides a full width container, spanning the entire width of the viewport.

Columns

.col-*

Applies to all breakpoints. * represents the number of columns (1-12).

.col-sm-*

Applies to small breakpoints (≥576px).

.col-md-*

Applies to medium breakpoints (≥768px).

.col-lg-*

Applies to large breakpoints (≥992px).

.col-xl-*

Applies to extra large breakpoints (≥1200px).

.col-xxl-*

Applies to larger breakpoints (≥1400px).

Example

`

Components

Buttons

.btn

Base class for all buttons.

.btn-primary

Primary button style.

.btn-secondary

Secondary button style.

.btn-success

Success button style.

.btn-danger

Danger button style.

.btn-warning

Warning button style.

.btn-info

Info button style.

.btn-light

Light button style.

.btn-dark

Dark button style.

.btn-link

Link button style.

.btn-outline-*

Outline button styles (e.g., .btn-outline-primary).

.btn-lg, .btn-sm

Large and small button sizes.

Navbars

.navbar - Base class for navbars.
.navbar-expand{-sm|-md|-lg|-xl|-xxl} - For responsive behavior.
.navbar-light - Light text color for use with light background colors
.navbar-dark - Dark text color for use with dark background colors
.bg-light, .bg-dark, .bg-primary - Background colors.

Utilities

Spacing

m-*

Margins (e.g., mt-3 for margin-top).

p-*

Padding (e.g., pt-3 for padding-top).

*-auto

Auto margins (e.g., mx-auto for horizontal auto margins).

{property}{sides}-{size}

Where property is m for margin, p for padding; sides is t (top), b (bottom), l (left), r (right), x (left and right), y (top and bottom), or blank for all 4 sides; size is a number (0-5) or auto.

Text

.text-left

Left-aligns text.

.text-center

Center-aligns text.

.text-right

Right-aligns text.

.text-justify

Justifies text.

.text-lowercase

Transforms text to lowercase.

.text-uppercase

Transforms text to uppercase.

.text-capitalize

Capitalizes text.

.font-weight-bold

Bold Text.

Forms

Form Controls

.form-control - Basic styling for form inputs, textareas, and selects.
.form-label - For form labels.
.form-text - For help text below form controls.
.form-select - To style select menus.

Form Layout

.row

Use with .col-* classes to create horizontal forms.

.form-group (deprecated)

While still functional, consider using the grid system or utilities for more flexible layouts.
Download PDF