Bootstrap 4 tutorial

Utilities (2): Colors / Display / Embed

Colors

Text color

.text-(primary|secondary|success|danger|warning|info|light|dark|body|muted|white|black-50|white-50)

.color-black-50 and .color-white-50 set translucent colors with 50% opacity.

Text samples

span.text-(primary|secondary|...)

.text-primary

.text-secondary

.text-success

.text-danger

.text-warning

.text-info

.text-light

.text-dark

.text-body

.text-muted

.text-white

.text-black-50

.text-white-50

Link samples

a.text-(primary|secondary|...)

Background color

.bg-(primary|secondary|success|danger|warning|info|light|dark|white|transparent)

.bg-primary

.bg-secondary

.bg-success

.bg-danger

.bg-warning

.bg-info

.bg-light

.bg-dark

.bg-white

.bg-transparent

.bg-transparent is used to remove default background colors. See Cards - Mixin utilities example.

Display property

Utility for setting CSS display property (see CSS reference for detail).

Notation

.d(-sm|-md|-lg|-xl)?-(none|inline|inline-block|block|...)

Responsive setting

.d- apply as default (xs)
.d-sm- apply for sm(≧576px) breakpoint
.d-md- apply for md(≧768px) breakpoint
.d-lg- apply for lg(≧992px) breakpoint
.d-xl- apply for xl(≧1200px) breakpoint

Setting CSS `display` property

none
inline
inline-block
block
table
table-cell
table-row
flex
inline-flex

Changing default settings

Division elements forced as inline div.d-inline ⇒ arranged horizontally

div.d-inline

div.d-inline

Span elements forced as block span.d-block ⇒ arranged vertically

span.d-blockspan.d-block

Responsive showing/hiding elements

(1) e.g. setting for hiding a block element on md (768px≤width<992px) only (least to most prior).

display:block as default
.d-md-none hide for md (and above) (overrides default)
.d-lg-block display as a block for lg and above (most prior)

Sample for all cases (see source for detail)

Disappears only on XS (width <576px)

Disappaers only on SM (576px≤width<768px)

Disappaers only on MD (768px≤width<992px)

Disappaers only on LG (992px≤width<1200px)

Disappears only on XL (width≥1200px)

(2) e.g. setting for display as a block element on md (768px≤width<992px) only (least to most prior)

.d-none hide element as default
.d-md-block display on md (and above)
.m-lg-none hide on lg and above (most prior)

Sample for all cases (see source for detail)

Appears only on XS (width<576px)

Appears only on SM (576px≤width<768px)

Appears only on MD (768px≤width<992px)

Appears only on LG (992px≤width<1200px)

Appears only on XL(width≥1200px)

Display in print

Use .d-print-(none|inline|inline-block|block|...) for changing display setting only on printing.

Embed

Responsive setting (structure) for embedded objects.

parent div.embed-responsive.embed-responsive-(21by9|16by9|4by3|1by1)
- child (iframe|embed|video|object).embed-responsible-item
  - Attribute src="..."

Aspect ratios

Parent's (21by9|16by9|4by3|1by1) specifies aspect ratio.

21by9 21:9 - Ultra-Widescreen
16by9 16:9 - HD TV (Hi-Vision)
4by3 4:3 - SD(traditional) TV
1by1 1:1 - Square

Examples