Bootstrap 4 tutorial

Utilities (2): Colors / Display / Embed


Text color


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
















Primary link

Secondary link

Success link

Danger link

Warning link

Info link

Light link

Dark link

Body link

Muted link

White link

Black-50 link

White-50 link

Background color


.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).



Responsive setting
Setting CSS display property

Changing default settings

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


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


Responsive showing/hiding elements

(1) e.g. setting for hiding a block element on md (768px≤width<992px) only (least to 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)

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.


Responsive setting (structure) for embedded objects.

Aspect ratios

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