Text

Text alignment

Justification .text-justify

(Without .text-justify )

Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.

(With .text-justify )

Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.

Left/Center/Right .text(-sm|-md|-lg|-xl)?-(left|center|right)

.text-left

Left-aligned on all viewport sizes.

.text-center

Center-aligned on all viewport sizes.

.text-right

Right-aligned on all viewport sizes.

.text-sm-center

Center-aligned on viewport width ≧ 576px

.text-md-center

Center-aligned on viewport width ≧ 768px

.text-lg-center

Center-aligned on viewport width ≧ 992px

.text-xl-center

Center-aligned on viewport width ≧ 1200px

.text-sm-right

Right-aligned on viewport width ≧ 576px

.text-md-right

Right-aligned on viewport width ≧ 768px

.text-lg-right

Right-aligned on viewport width ≧ 992px

.text-xl-right

Right-aligned on viewport width ≧ 1200px

Text wrapping and overflow

(1) Wrapping (Box width is fixed to 15rem )

Without .text-nowrap

With .text-nowrap

(2) Truncation for block elements (Box width is fixed to 15rem )

Without .text-truncate

With .text-truncate

(2) Truncation for inline block elements (Box is limited to style="max-width: 15rem;" )

Without .text-truncate

With .text-truncate

Text transform

(default)

The quick brown fox jumps over the lazy dog.

.text-lowercase

The quick brown fox jumps over the lazy dog.

.text-uppercase

The quick brown fox jumps over the lazy dog.

.text-capitalize

The quick brown fox jumps over the lazy dog.

Font weight and italics

.font-weight-normal (default)

The quick brown fox jumps over the lazy dog.

.font-weight-bold

The quick brown fox jumps over the lazy dog.

.font-weight-light

The quick brown fox jumps over the lazy dog.

.font-italic

The quick brown fox jumps over the lazy dog.

(Ver 4.2 or later) .font-weight-(bolder|lighter) adjusts a font weight relatively to the parent element.

Example(p): base > bolder > even bolder

Example(p.font-weight-bold): base > lighter > even lighter

Monospace

.text-monospace

This is in monospace.

Reset color

.reset-color cancels a color setting and inherits it from parent color.

Muted text with a reset link.

Text decoration

Use .text-decoration-none to remove default text decoration.

u ⇒ Underline

u.text-decoration-none ⇒ No underline

Vertical alignment

Utility classes for setting CSS vertical-align property (see CSS reference for detail).

.align-(baseline|top|middle|bottom|text-top|text-bottom)

Examples

.align-* for inline elements span

baselinetopmiddlebottomtext-toptext-bottom

.align-* for table cells td (table height is fixed to 8rem )

baseline

top

middle

bottom

text-top

text-bottom

Visibility

Utility classes for setting CSS visibility property (see CSS reference for detail).

• .visible ⇒ set visibility: visible
• .invisible ⇒ set visibility: hidden

Example

Consider a following grid layout.

Bootstrap has two utility classses to get rid of a element with different results.

.d-none (see Display utility ) ⇒ element is removed from layout

.invisible ⇒ element hides but remains as a part of layout