Website Development I

Course Info Class Notes Resources Student Websites

Bootstrap 5 Cheat Sheet

Browser Width Breakpoints

Breakpoint Class
Infix Dimensions

X-Small (none) <   576px

Small sm ≥   576px

Medium md ≥   768px

Large lg ≥   992px

Extra Large xl ≥ 1200px

Extra Extra Large xxl ≥ 1400px

Breakpoint	Class Infix	Dimensions
X-Small	(none)	< 576px
Small	`sm`	≥ 576px
Medium	`md`	≥ 768px
Large	`lg`	≥ 992px
Extra Large	`xl`	≥ 1200px
Extra Extra Large	`xxl`	≥ 1400px

Spacing Notation

reference: https://getbootstrap.com/docs/5.0/utilities/spacing/

Classes are named using the format{property}{sides}-{size} for xs and {property}{sides}-{breakpoint}-{size} for sm, md, lg, xl, and xxl.

where property is one of:

m = for classes that set margin

p = for classes that set padding

where sides is one of:

t = for classes that set margin-top or padding-top

b = for classes that set margin-bottom or padding-bottom

s = (start) for classes that set margin-left or padding-left in LTR, margin-right or padding-right in RTL

LTR = left to right

RTL = right to left

e = (end) for classes that set margin-right or padding-right in LTR, margin-left or padding-left in RTL

x = for classes that set both *-left and *-right

y = for classes that set both *-top and *-bottom

blank = for classes that set a margin or padding on all 4 sides of the element

where size is one of:

0 = for classes that eliminate the margin or padding by setting it to 0

1 = (by default) for classes that set the margin or padding to $spacer * .25

2 = (by default) for classes that set the margin or padding to $spacer * .5

3 = (by default) for classes that set the margin or padding to $spacer

4 = (by default) for classes that set the margin or padding to $spacer * 1.5

5 = (by default) for classes that set the margin or padding to $spacer * 3

auto = for classes that set the margin to auto

Spacer Multipliers for use with margins (mt-* mb-*) and padding (pt-* pb-*)

1 = 0.25 * $spacer ($spacer is a built-in Bootstrap variable)

2 = 0.50 * $spacer

3 = 1.00 * $spacer

4 = 1.50 * $spacer

5 = 3.00 * $spacer

Class Name Examples

border-secondary = set the border color to Bootstrap’s built-in secondary color

card ........... = format the contained content as a Bootstrap “card”

col-6 .......... = set the number of columns to allocate for the enclosed content to 6 (of the available 12)

col-lg-6 ....... = set the number of columns to allocate for the enclosed content to 6 when the browser width is ≥ 992 pixels

d-flex ......... = create a flexbox container and transform direct children elements into flex items

mb-* ........... = margin bottom “spacer” multipler

mb-5 ........... = set the bottom margin as indicated for value 5 in the above table of Spacer Multipliers

me-auto ........ = set the end margin to auto

me-lg-0 ........ = set the end margin to 0 for browser window widths ≥ 992 pixels

mt-3 ........... = set the top margin as indicated for value 3 in the above table of Spacer Multipliers

mx-auto ........ = center the element to which this class is applied

pt-* ........... = padding top “spacer” multipler

pt-lg-0 ........ = set the end padding to 0 for browser window widths ≥ 992 pixels

shadow ......... = add a drop shadow to the element to which this class is applied

`border-secondary`	=	set the border color to Bootstrap’s built-in secondary color
`card ...........`	=	format the contained content as a Bootstrap “card”
`col-6 ..........`	=	set the number of columns to allocate for the enclosed content to 6 (of the available 12)
`col-lg-6 .......`	=	set the number of columns to allocate for the enclosed content to 6 when the browser width is ≥ 992 pixels
`d-flex .........`	=	create a flexbox container and transform direct children elements into flex items
`mb-* ...........`	=	margin bottom “spacer” multipler
`mb-5 ...........`	=	set the bottom margin as indicated for value 5 in the above table of Spacer Multipliers
`me-auto ........`	=	set the end margin to auto
`me-lg-0 ........`	=	set the end margin to 0 for browser window widths ≥ 992 pixels
`mt-3 ...........`	=	set the top margin as indicated for value 3 in the above table of Spacer Multipliers
`mx-auto ........`	=	center the element to which this class is applied
`pt-* ...........`	=	padding top “spacer” multipler
`pt-lg-0 ........`	=	set the end padding to 0 for browser window widths ≥ 992 pixels
`shadow .........`	=	add a drop shadow to the element to which this class is applied