Bootstrap 4 Utilities Cheatsheet

bs4-cheatsheet.md

Bootstrap 4 Utilities Cheatsheet

Media Queries

1. up

Bootstrap 4 Mixins	Compiled into
@include media-breakpoint-up(xs)	@media (min-width: 0px)
@include media-breakpoint-up(sm)	@media (min-width: 576px)
@include media-breakpoint-up(md)	@media (min-width: 768px)
@include media-breakpoint-up(lg)	@media (min-width: 992px)
@include media-breakpoint-up(xl)	@media (min-width: 1200px)

2. down

Bootstrap 4 Mixins	Compiled into
@include media-breakpoint-down(xs)	@media (max-width: 575.98px)
@include media-breakpoint-down(sm)	@media (max-width: 767.98px)
@include media-breakpoint-down(md)	@media (max-width: 991.98px)
@include media-breakpoint-down(lg)	@media (max-width: 1199.98px)
@include media-breakpoint-down(xl)	N/A

3. only

Bootstrap 4 Mixins	Compiled into
@include media-breakpoint-only(xs)	@media (max-width: 575.98px)
@include media-breakpoint-only(sm)	@media (min-width: 576px) and (max-width: 767.98px)
@include media-breakpoint-only(md)	@media (min-width: 768px) and (max-width: 991.98px)
@include media-breakpoint-only(lg)	@media (min-width: 992px) and (max-width: 1199.98px)
@include media-breakpoint-only(xl)	@media (min-width: 1200px)

4. between

Bootstrap 4 Mixins	Compiled into
@include media-breakpoint-between(xs, $size)	Just use @include media-breakpoint-down($size)
@include media-breakpoint-between($size, xl)	Just use @include media-breakpoint-up($size)
@include media-breakpoint-between(sm, md)	@media (min-width: 576px) and (max-width: 991.98px)
@include media-breakpoint-between(sm, lg)	@media (min-width: 576px) and (max-width: 1199.98px)
@include media-breakpoint-between(md, lg)	@media (min-width: 768px) and (max-width: 1199.98px)

---

Padding and Margin

{property}{sides}-{breakpoint}-{size} or {property}{sides}-{size}

Property

• m - margin
• p - padding

Sides

• blank - all 4 sides
• x - left + right
• y - top + bottom
• t, b, l, r for top, bottom, left, right

Breakpoint (Optional)

• sm, md, lg, xl

The padding or margin will be applied on the given breakpoint and above

size

• 0, 1, 2, 3, 4, 5 and auto

Example:

• margin left/right auto: .mx-auto
• Some padding-top: .pt-2
• a bit of margin-bottom on md screen and above: .mb-md-1
• Large 4-sides padding only on xs screen, otherwise no padding: .p-5 .p-sm-0
• margin auto only on md size, if above md, 0 margin: .m-md-auto .m-lg-0
• margin auto only on md size, in all others, 0 margin: .m-0, .m-md-auto .m-lg-0

• Considering that you want some margin-left to be applied in different scenario:

  Screen Size	Class
  Appears on all	.ml-3
  Appears only on xs	.ml-3 .ml-sm-0
  Appears only on sm	.ml-sm-3 .ml-md-0
  Appears only on md	.ml-md-3 .ml-lg-0
  Appears only on lg	.ml-lg-3 .d-xl-0
  Appears only on xl	.ml-xl-3

---

Display

.d-{value} or .d-{breakpoint}-{value}

• value: none, inline, inline-block, block, table, table-cell, table-row, flex, inline-flex

The media queries effect screen widths with the given breakpoint or larger. For example, .d-lg-none sets display: none; on both lg and xl screens.

Hide/Show on a range of screen sizes

	xs (<576px)	sm (≥576px)	md (≥768px)	lg (≥992px)	xl (≥1200px)
d-none d-sm-block	hide	show	show	show	show
d-none d-md-block	hide	hide	show	show	show
d-none d-lg-block	hide	hide	hide	show	show
d-none d-xl-block	hide	hide	hide	hide	show
d-block d-xl-none	show	show	show	show	hide
d-block d-lg-none	show	show	show	hide	hide
d-block d-md-none	show	show	hide	hide	hide
d-block d-sm-none	show	hide	hide	hide	hide

Show on specific screen size

	xs (<576px)	sm (≥576px)	md (≥768px)	lg (≥992px)	xl (≥1200px)
d-block d-sm-none	show	hide	hide	hide	hide
d-none d-sm-block d-md-none	hide	show	hide	hide	hide
d-none d-md-block d-lg-none	hide	hide	show	hide	hide
d-none d-lg-block d-xl-none	hide	hide	hide	show	hide
d-none d-xl-block	hide	hide	hide	hide	show

Hide on specific screen size

	xs (<576px)	sm (≥576px)	md (≥768px)	lg (≥992px)	xl (≥1200px)
d-none d-sm-block	hide	show	show	show	show
d-block d-sm-none d-md-block	show	hide	show	show	show
d-block d-md-none d-lg-block	show	show	hide	show	show
d-block d-lg-none d-xl-block	show	show	show	hide	show
d-block d-xl-none	show	show	show	show	hide

---

Height and Width

Unfortunately there is no responsiveness support.

Height

• w-25 - width: 25%;
• w-50 - width: 50%;
• w-75 - width: 75%;
• w-100 - width: 100%;
• w-auto - width: auto;
• mw-100 - max-width: 100%;

Width

• h-25 - height: 25%;
• h-50 - height: 50%;
• h-75 - height: 75%;
• h-100 - height: 100%;
• h-auto - height: auto;
• mh-100 - max-height: 100%;

---

Text

text-*

.text-{value} or .text-{breakpoint}-{value}

• value: left, center, right, justify, nowrap, truncate, lowercase, uppercase, capitalize

Example:

• right aligned text on all screens - .text-right
• centering text only on mobile - .text-center .text-md-left
• truncate text inside a block or inline-block with ellipsis - .text-truncate
• let text overflow container - .text-nowrap

font-*

• .font-weight-bold
• .font-weight-normal
• .font-weight-light
• .font-italic
• .font-monospace

---

Border

• To add borders on 4 sides: .border
• To remove all borders: .border-0
• To apply border only on certain side (top, bottom, left, right) - .border-{side}
• To remove border only on certain side (top, bottom, left, right) - .border-{side}-0

Color

• .border-{primary | secondary | success | danger | warning | info | light | dark | white}

Border-radius

• Rounded element - .rounded
• Circle element - .rounded-circle
• Remove border-radius - .rounded-0