Background Borders Display Flex Float Interactions Link Object fit Others Position Sizing Spacing Text Thumbnail Visibility z-index
Styles

Background gradient (colors_background_gradient)

Add a linear gradient as background image to the backgrounds. This gradient starts with a semi-transparent white which fades out to the bottom.

Gradient (bg-gradient)
<p class="bg-gradient border p-2 bg-primary">Gradient (bg-gradient)</p>

Background color (colors_background_color)

Similar to the contextual text color classes, easily set the background of an element to any contextual class.

Primary (bg-primary)

Primary subtle (bg-primary-subtle)

Secondary (bg-secondary)

Secondary subtle (bg-secondary-subtle)

Success (bg-success)

Success subtle (bg-success-subtle)

Danger (bg-danger)

Danger subtle (bg-danger-subtle)

Warning (bg-warning)

Warning subtle (bg-warning-subtle)

Info (bg-info)

Info subtle (bg-info-subtle)

Light (bg-light)

Light subtle (bg-light-subtle)

Dark (bg-dark)

Dark subtle (bg-dark-subtle)

Body secondary (bg-body-secondary)

Body tertiary (bg-body-tertiary)

Body (bg-body)

White (bg-white)

Black (bg-black)

Transparent (bg-transparent)

Primary with contrasting foreground (text-bg-primary)

Secondary with contrasting foreground (text-bg-secondary)

Success with contrasting foreground (text-bg-success)

Danger with contrasting foreground (text-bg-danger)

Warning with contrasting foreground (text-bg-warning)

Info with contrasting foreground (text-bg-info)

Light with contrasting foreground (text-bg-light)

Dark with contrasting foreground (text-bg-dark)

Body with contrasting foreground (text-bg-body)

White with contrasting foreground (text-bg-white)

Transparent with contrasting foreground (text-bg-transparent)
<p class="bg-primary border p-2">Primary (bg-primary)</p> <p class="bg-primary-subtle border p-2">Primary subtle (bg-primary-subtle)</p> <p class="bg-secondary border p-2">Secondary (bg-secondary)</p> <p class="bg-secondary-subtle border p-2">Secondary subtle (bg-secondary-subtle)</p> <p class="bg-success border p-2">Success (bg-success)</p> <p class="bg-success-subtle border p-2">Success subtle (bg-success-subtle)</p> <p class="bg-danger border p-2">Danger (bg-danger)</p> <p class="bg-danger-subtle border p-2">Danger subtle (bg-danger-subtle)</p> <p class="bg-warning border p-2">Warning (bg-warning)</p> <p class="bg-warning-subtle border p-2">Warning subtle (bg-warning-subtle)</p> <p class="bg-info border p-2">Info (bg-info)</p> <p class="bg-info-subtle border p-2">Info subtle (bg-info-subtle)</p> <p class="bg-light border p-2">Light (bg-light)</p> <p class="bg-light-subtle border p-2">Light subtle (bg-light-subtle)</p> <p class="bg-dark border p-2">Dark (bg-dark)</p> <p class="bg-dark-subtle border p-2">Dark subtle (bg-dark-subtle)</p> <p class="bg-body-secondary border p-2">Body secondary (bg-body-secondary)</p> <p class="bg-body-tertiary border p-2">Body tertiary (bg-body-tertiary)</p> <p class="bg-body border p-2">Body (bg-body)</p> <p class="bg-white border p-2">White (bg-white)</p> <p class="bg-black border p-2">Black (bg-black)</p> <p class="bg-transparent border p-2">Transparent (bg-transparent)</p> <p class="text-bg-primary border p-2">Primary with contrasting foreground (text-bg-primary)</p> <p class="text-bg-secondary border p-2">Secondary with contrasting foreground (text-bg-secondary)</p> <p class="text-bg-success border p-2">Success with contrasting foreground (text-bg-success)</p> <p class="text-bg-danger border p-2">Danger with contrasting foreground (text-bg-danger)</p> <p class="text-bg-warning border p-2">Warning with contrasting foreground (text-bg-warning)</p> <p class="text-bg-info border p-2">Info with contrasting foreground (text-bg-info)</p> <p class="text-bg-light border p-2">Light with contrasting foreground (text-bg-light)</p> <p class="text-bg-dark border p-2">Dark with contrasting foreground (text-bg-dark)</p> <p class="text-bg-body border p-2">Body with contrasting foreground (text-bg-body)</p> <p class="text-bg-white border p-2">White with contrasting foreground (text-bg-white)</p> <p class="text-bg-transparent border p-2">Transparent with contrasting foreground (text-bg-transparent)</p>

Background opacity (colors_background_opacity)

Modify the opacity of the background color with utility classes.

100% (bg-opacity-100)

75% (bg-opacity-75)

50% (bg-opacity-50)

25% (bg-opacity-25)

10% (bg-opacity-10)
<p class="bg-opacity-100 border p-2 bg-primary">100% (bg-opacity-100)</p> <p class="bg-opacity-75 border p-2 bg-primary">75% (bg-opacity-75)</p> <p class="bg-opacity-50 border p-2 bg-primary">50% (bg-opacity-50)</p> <p class="bg-opacity-25 border p-2 bg-primary">25% (bg-opacity-25)</p> <p class="bg-opacity-10 border p-2 bg-primary">10% (bg-opacity-10)</p>

Border (borders_border)

Use it to add an element's borders. Choose from all borders or one at a time.

Additive All (border)

Additive Top (border-top)

Additive End (border-end)

Additive Bottom (border-bottom)

Additive Start (border-start)
<p class="border p-2 bg-light">Additive All (border)</p> <p class="border-top p-2 bg-light">Additive Top (border-top)</p> <p class="border-end p-2 bg-light">Additive End (border-end)</p> <p class="border-bottom p-2 bg-light">Additive Bottom (border-bottom)</p> <p class="border-start p-2 bg-light">Additive Start (border-start)</p>

Border subtractive (borders_border_subtractive)

Use it to remove an element's borders. Choose from all borders or one at a time.

All (border-0)

Top (border-top-0)

End (border-end-0)

Bottom (border-bottom-0)

Start (border-start-0)
<p class="border-0 border p-2 bg-light">All (border-0)</p> <p class="border-top-0 border p-2 bg-light">Top (border-top-0)</p> <p class="border-end-0 border p-2 bg-light">End (border-end-0)</p> <p class="border-bottom-0 border p-2 bg-light">Bottom (border-bottom-0)</p> <p class="border-start-0 border p-2 bg-light">Start (border-start-0)</p>

Border color (borders_border_color)

Change the border color using utilities built on our theme colors.

Primary (border-primary)

Primary subtle (border-primary-subtle)

Secondary (border-secondary)

Secondary subtle (border-secondary-subtle)

Success (border-success)

Success subtle (border-success-subtle)

Danger (border-danger)

Danger subtle (border-danger-subtle)

Warning (border-warning)

Warning subtle (border-warning-subtle)

Info (border-info)

Info subtle (border-info-subtle)

Light (border-light)

Light subtle (border-light-subtle)

Dark (border-dark)

Dark subtle (border-dark-subtle)

White (border-white)

Black (border-black)
<p class="border-primary border p-2 bg-light">Primary (border-primary)</p> <p class="border-primary-subtle border p-2 bg-light">Primary subtle (border-primary-subtle)</p> <p class="border-secondary border p-2 bg-light">Secondary (border-secondary)</p> <p class="border-secondary-subtle border p-2 bg-light">Secondary subtle (border-secondary-subtle)</p> <p class="border-success border p-2 bg-light">Success (border-success)</p> <p class="border-success-subtle border p-2 bg-light">Success subtle (border-success-subtle)</p> <p class="border-danger border p-2 bg-light">Danger (border-danger)</p> <p class="border-danger-subtle border p-2 bg-light">Danger subtle (border-danger-subtle)</p> <p class="border-warning border p-2 bg-light">Warning (border-warning)</p> <p class="border-warning-subtle border p-2 bg-light">Warning subtle (border-warning-subtle)</p> <p class="border-info border p-2 bg-light">Info (border-info)</p> <p class="border-info-subtle border p-2 bg-light">Info subtle (border-info-subtle)</p> <p class="border-light border p-2 bg-light">Light (border-light)</p> <p class="border-light-subtle border p-2 bg-light">Light subtle (border-light-subtle)</p> <p class="border-dark border p-2 bg-light">Dark (border-dark)</p> <p class="border-dark-subtle border p-2 bg-light">Dark subtle (border-dark-subtle)</p> <p class="border-white border p-2 bg-light">White (border-white)</p> <p class="border-black border p-2 bg-light">Black (border-black)</p>

Border opacity (borders_border_opacity)

This allows for real-time color changes without compilation and dynamic alpha transparency changes.

100% (border-opacity-100)

75% (border-opacity-75)

50% (border-opacity-50)

25% (border-opacity-25)

10% (border-opacity-10)
<p class="border-opacity-100 border border-success p-2">100% (border-opacity-100)</p> <p class="border-opacity-75 border border-success p-2">75% (border-opacity-75)</p> <p class="border-opacity-50 border border-success p-2">50% (border-opacity-50)</p> <p class="border-opacity-25 border border-success p-2">25% (border-opacity-25)</p> <p class="border-opacity-10 border border-success p-2">10% (border-opacity-10)</p>

Border width (borders_border_width)

1 (border-1)

2 (border-2)

3 (border-3)

4 (border-4)

5 (border-5)
<p class="border-1 border p-2 bg-light">1 (border-1)</p> <p class="border-2 border p-2 bg-light">2 (border-2)</p> <p class="border-3 border p-2 bg-light">3 (border-3)</p> <p class="border-4 border p-2 bg-light">4 (border-4)</p> <p class="border-5 border p-2 bg-light">5 (border-5)</p>

Border radius (borders_border_radius)

Add classes to an element to easily round its corners.

Rounded (rounded)

Rounded Top (rounded-top)

Rounded End (rounded-end)

Rounded Bottom (rounded-bottom)

Rounded Start (rounded-start)

Rounded Circle (rounded-circle)

Rounded Pill (rounded-pill)
<p class="rounded border p-2 bg-light">Rounded (rounded)</p> <p class="rounded-top border p-2 bg-light">Rounded Top (rounded-top)</p> <p class="rounded-end border p-2 bg-light">Rounded End (rounded-end)</p> <p class="rounded-bottom border p-2 bg-light">Rounded Bottom (rounded-bottom)</p> <p class="rounded-start border p-2 bg-light">Rounded Start (rounded-start)</p> <p class="rounded-circle border p-2 bg-light">Rounded Circle (rounded-circle)</p> <p class="rounded-pill border p-2 bg-light">Rounded Pill (rounded-pill)</p>

Border radius width (borders_border_radius_width)

Rounded reset (rounded-0)

Rounded size 1 (rounded-1)

Rounded size 2 (rounded-2)

Rounded size 3 (rounded-3)

Rounded size 4 (rounded-4)

Rounded size 5 (rounded-5)
<p class="rounded-0 border p-2 bg-light">Rounded reset (rounded-0)</p> <p class="rounded-1 border p-2 bg-light">Rounded size 1 (rounded-1)</p> <p class="rounded-2 border p-2 bg-light">Rounded size 2 (rounded-2)</p> <p class="rounded-3 border p-2 bg-light">Rounded size 3 (rounded-3)</p> <p class="rounded-4 border p-2 bg-light">Rounded size 4 (rounded-4)</p> <p class="rounded-5 border p-2 bg-light">Rounded size 5 (rounded-5)</p>

Shadows (shadows)

Add or remove shadows to elements with box-shadow utilities.

None (shadow-none)

Small (shadow-sm)

Normal (shadow)

Large (shadow-lg)
<p class="shadow-none border p-2 bg-light m-3">None (shadow-none)</p> <p class="shadow-sm border p-2 bg-light m-3">Small (shadow-sm)</p> <p class="shadow border p-2 bg-light m-3">Normal (shadow)</p> <p class="shadow-lg border p-2 bg-light m-3">Large (shadow-lg)</p>

Display all screens (display_all)

Display utility classes that apply to all breakpoints, from xs to xxl, have no breakpoint abbreviation in them. This is because those classes are applied from min-width: 0 and up, and thus are not bound by a media query.

None (d-none)

Inline (d-inline)

Inline block (d-inline-block)

Block (d-block)

Grid (d-grid)

Inline grid (d-inline-grid)

Table (d-table)

Table cell (d-table-cell)

Table row (d-table-row)

Flex (d-flex)

Inline flex (d-inline-flex)
<p class="d-none">None (d-none)</p> <p class="d-inline">Inline (d-inline)</p> <p class="d-inline-block">Inline block (d-inline-block)</p> <p class="d-block">Block (d-block)</p> <p class="d-grid">Grid (d-grid)</p> <p class="d-inline-grid">Inline grid (d-inline-grid)</p> <p class="d-table">Table (d-table)</p> <p class="d-table-cell">Table cell (d-table-cell)</p> <p class="d-table-row">Table row (d-table-row)</p> <p class="d-flex">Flex (d-flex)</p> <p class="d-inline-flex">Inline flex (d-inline-flex)</p>

Display small screens (display_small)

These utility classes apply to small screens and larger.

Display: none on small screens and above (d-sm-none)

Display: inline on small screens and above (d-sm-inline)

Display: inline-block on small screens and above (d-sm-inline-block)

Display: block on small screens and above (d-sm-block)

Display: grid on small screens and above (d-sm-grid)

Display: inline grid on small screens and above (d-sm-inline-grid)

Display: table on small screens and above (d-sm-table)

Display: table-cell on small screens and above (d-sm-table-cell)

Display: table-row on small screens and above (d-sm-table-row)

Display: flex on small screens and above (d-sm-flex)

Display: inline-flex on small screens and above (d-sm-inline-flex)
<p class="d-sm-none">Display: none on small screens and above (d-sm-none)</p> <p class="d-sm-inline">Display: inline on small screens and above (d-sm-inline)</p> <p class="d-sm-inline-block">Display: inline-block on small screens and above (d-sm-inline-block)</p> <p class="d-sm-block">Display: block on small screens and above (d-sm-block)</p> <p class="d-sm-grid">Display: grid on small screens and above (d-sm-grid)</p> <p class="d-sm-inline-grid">Display: inline grid on small screens and above (d-sm-inline-grid)</p> <p class="d-sm-table">Display: table on small screens and above (d-sm-table)</p> <p class="d-sm-table-cell">Display: table-cell on small screens and above (d-sm-table-cell)</p> <p class="d-sm-table-row">Display: table-row on small screens and above (d-sm-table-row)</p> <p class="d-sm-flex">Display: flex on small screens and above (d-sm-flex)</p> <p class="d-sm-inline-flex">Display: inline-flex on small screens and above (d-sm-inline-flex)</p>

Display medium screens (display_medium)

These utility classes apply to medium screens and larger.

Display: none on medium screens and above (d-md-none)

Display: inline on medium screens and above (d-md-inline)

Display: inline-block on medium screens and above (d-md-inline-block)

Display: block on medium screens and above (d-md-block)

Display: grid on medium screens and above (d-md-grid)

Display: inline grid on medium screens and above (d-md-inline-grid)

Display: table on medium screens and above (d-md-table)

Display: table-cell on medium screens and above (d-md-table-cell)

Display: table-row on medium screens and above (d-md-table-row)

Display: flex on medium screens and above (d-md-flex)

Display: inline-flex on medium screens and above (d-md-inline-flex)
<p class="d-md-none">Display: none on medium screens and above (d-md-none)</p> <p class="d-md-inline">Display: inline on medium screens and above (d-md-inline)</p> <p class="d-md-inline-block">Display: inline-block on medium screens and above (d-md-inline-block)</p> <p class="d-md-block">Display: block on medium screens and above (d-md-block)</p> <p class="d-md-grid">Display: grid on medium screens and above (d-md-grid)</p> <p class="d-md-inline-grid">Display: inline grid on medium screens and above (d-md-inline-grid)</p> <p class="d-md-table">Display: table on medium screens and above (d-md-table)</p> <p class="d-md-table-cell">Display: table-cell on medium screens and above (d-md-table-cell)</p> <p class="d-md-table-row">Display: table-row on medium screens and above (d-md-table-row)</p> <p class="d-md-flex">Display: flex on medium screens and above (d-md-flex)</p> <p class="d-md-inline-flex">Display: inline-flex on medium screens and above (d-md-inline-flex)</p>

Display large screens (display_large)

These utility classes apply to large screens and larger.

Display: none on large screens and above (d-lg-none)

Display: inline on large screens and above (d-lg-inline)

Display: inline-block on large screens and above (d-lg-inline-block)

Display: block on large screens and above (d-lg-block)

Display: grid on large screens and above (d-lg-grid)

Display: inline grid on large screens and above (d-lg-inline-grid)

Display: table on large screens and above (d-lg-table)

Display: table-cell on large screens and above (d-lg-table-cell)

Display: table-row on large screens and above (d-lg-table-row)

Display: flex on large screens and above (d-lg-flex)

Display: inline-flex on large screens and above (d-lg-inline-flex)
<p class="d-lg-none">Display: none on large screens and above (d-lg-none)</p> <p class="d-lg-inline">Display: inline on large screens and above (d-lg-inline)</p> <p class="d-lg-inline-block">Display: inline-block on large screens and above (d-lg-inline-block)</p> <p class="d-lg-block">Display: block on large screens and above (d-lg-block)</p> <p class="d-lg-grid">Display: grid on large screens and above (d-lg-grid)</p> <p class="d-lg-inline-grid">Display: inline grid on large screens and above (d-lg-inline-grid)</p> <p class="d-lg-table">Display: table on large screens and above (d-lg-table)</p> <p class="d-lg-table-cell">Display: table-cell on large screens and above (d-lg-table-cell)</p> <p class="d-lg-table-row">Display: table-row on large screens and above (d-lg-table-row)</p> <p class="d-lg-flex">Display: flex on large screens and above (d-lg-flex)</p> <p class="d-lg-inline-flex">Display: inline-flex on large screens and above (d-lg-inline-flex)</p>

Display x-large screens (display_x_large)

These utility classes apply to extra-large screens and extra-extra-large screens.

Display: none on x-large screens and xx-large screens. (d-xl-none)

Display: inline on x-large screens and xx-large screens. (d-xl-inline)

Display: inline-block on x-large screens and xx-large screens. (d-xl-inline-block)

Display: block on x-large screens and xx-large screens. (d-xl-block)

Display: grid on x-large screens and xx-large screens. (d-xl-grid)

Display: inline grid on x-large screens and xx-large screens. (d-xl-inline-grid)

Display: table on x-large screens and xx-large screens. (d-xl-table)

Display: table-cell on x-large screens and xx-large screens. (d-xl-table-cell)

Display: table-row on x-large screens and xx-large screens. (d-xl-table-row)

Display: flex on x-large screens and xx-large screens. (d-xl-flex)

Display: inline-flex on x-large screens and xx-large screens. (d-xl-inline-flex)
<p class="d-xl-none">Display: none on x-large screens and xx-large screens. (d-xl-none)</p> <p class="d-xl-inline">Display: inline on x-large screens and xx-large screens. (d-xl-inline)</p> <p class="d-xl-inline-block">Display: inline-block on x-large screens and xx-large screens. (d-xl-inline-block)</p> <p class="d-xl-block">Display: block on x-large screens and xx-large screens. (d-xl-block)</p> <p class="d-xl-grid">Display: grid on x-large screens and xx-large screens. (d-xl-grid)</p> <p class="d-xl-inline-grid">Display: inline grid on x-large screens and xx-large screens. (d-xl-inline-grid)</p> <p class="d-xl-table">Display: table on x-large screens and xx-large screens. (d-xl-table)</p> <p class="d-xl-table-cell">Display: table-cell on x-large screens and xx-large screens. (d-xl-table-cell)</p> <p class="d-xl-table-row">Display: table-row on x-large screens and xx-large screens. (d-xl-table-row)</p> <p class="d-xl-flex">Display: flex on x-large screens and xx-large screens. (d-xl-flex)</p> <p class="d-xl-inline-flex">Display: inline-flex on x-large screens and xx-large screens. (d-xl-inline-flex)</p>

Display xx-large screens (display_xx_large)

These utility classes apply only to extra-extra-large screens.

Display: none only on xx-large screens (d-xxl-none)

Display: inline only on xx-large screens. (d-xxl-inline)

Display: inline-block only on xx-large screens. (d-xxl-inline-block)

Display: block only on xx-large screens. (d-xxl-block)

Display: grid only on xx-large screens. (d-xxl-grid)

Display: inline grid only on xx-large screens. (d-xxl-inline-grid)

Display: table only on xx-large screens. (d-xxl-table)

Display: table-cell only on xx-large screens. (d-xxl-table-cell)

Display: table-row only on xx-large screens. (d-xxl-table-row)

Display: flex only on xx-large screens. (d-xxl-flex)

Display: inline-flex only on xx-large screens. (d-xxl-inline-flex)
<p class="d-xxl-none">Display: none only on xx-large screens (d-xxl-none)</p> <p class="d-xxl-inline">Display: inline only on xx-large screens. (d-xxl-inline)</p> <p class="d-xxl-inline-block">Display: inline-block only on xx-large screens. (d-xxl-inline-block)</p> <p class="d-xxl-block">Display: block only on xx-large screens. (d-xxl-block)</p> <p class="d-xxl-grid">Display: grid only on xx-large screens. (d-xxl-grid)</p> <p class="d-xxl-inline-grid">Display: inline grid only on xx-large screens. (d-xxl-inline-grid)</p> <p class="d-xxl-table">Display: table only on xx-large screens. (d-xxl-table)</p> <p class="d-xxl-table-cell">Display: table-cell only on xx-large screens. (d-xxl-table-cell)</p> <p class="d-xxl-table-row">Display: table-row only on xx-large screens. (d-xxl-table-row)</p> <p class="d-xxl-flex">Display: flex only on xx-large screens. (d-xxl-flex)</p> <p class="d-xxl-inline-flex">Display: inline-flex only on xx-large screens. (d-xxl-inline-flex)</p>

Display in print (display_print)

Change the display value of elements when printing.

Hide on print only. (d-print-none)

Display as inline for printing. (d-print-inline)

Display as inline-block for printing. (d-print-inline-block)

Display as block for printing. (d-print-block)

Display as grid for printing. (d-print-grid)

Display as inline grid for printing. (d-print-inline-grid)

Display as table for printing. (d-print-table)

Display as table row for printing. (d-print-table-row)

Display as table cell for printing. (d-print-table-cell)

Display as flex for printing. (d-print-flex)

Display as inline-flex for printing. (d-print-inline-flex)
<p class="d-print-none">Hide on print only. (d-print-none)</p> <p class="d-print-inline">Display as inline for printing. (d-print-inline)</p> <p class="d-print-inline-block">Display as inline-block for printing. (d-print-inline-block)</p> <p class="d-print-block">Display as block for printing. (d-print-block)</p> <p class="d-print-grid">Display as grid for printing. (d-print-grid)</p> <p class="d-print-inline-grid">Display as inline grid for printing. (d-print-inline-grid)</p> <p class="d-print-table">Display as table for printing. (d-print-table)</p> <p class="d-print-table-row">Display as table row for printing. (d-print-table-row)</p> <p class="d-print-table-cell">Display as table cell for printing. (d-print-table-cell)</p> <p class="d-print-flex">Display as flex for printing. (d-print-flex)</p> <p class="d-print-inline-flex">Display as inline-flex for printing. (d-print-inline-flex)</p>

Flex (flex_flex)

Apply display utilities to create a flexbox container and transform direct children elements into flex items. Flex containers and items are able to be modified further with additional flex properties.

Flex (d-flex)

Inline flex (d-inline-flex)
<p class="d-flex border p-2 bg-light">Flex (d-flex)</p> <p class="d-inline-flex border p-2 bg-light">Inline flex (d-inline-flex)</p>

Flex direction (flex_direction)

Set the direction of flex items in a flex container with direction utilities. In most cases you can omit the horizontal class here as the browser default is row However, you may encounter situations where you needed to explicitly set this value (like responsive layouts).

Flex row (flex-row)

Reverse flex row (flex-row-reverse)

Flex column (flex-column)

Reverse flex column (flex-column-reverse)
<p class="flex-row d-flex border p-2 bg-light">Flex row (flex-row)</p> <p class="flex-row-reverse d-flex border p-2 bg-light">Reverse flex row (flex-row-reverse)</p> <p class="flex-column d-flex border p-2 bg-light">Flex column (flex-column)</p> <p class="flex-column-reverse d-flex border p-2 bg-light">Reverse flex column (flex-column-reverse)</p>

Flex justify content (flex_justify_content)

Use justify-content utilities on flexbox containers to change the alignment of flex items on the main axis (the x-axis to start, y-axis if flex-direction: column). Choose from start (browser default), end, center, between, around, or evenly.

Start (justify-content-start)

End (justify-content-end)

Center (justify-content-center)

Between (justify-content-between)

Around (justify-content-around)

Evenly (justify-content-evenly)
<p class="justify-content-start d-flex border p-2 bg-light">Start (justify-content-start)</p> <p class="justify-content-end d-flex border p-2 bg-light">End (justify-content-end)</p> <p class="justify-content-center d-flex border p-2 bg-light">Center (justify-content-center)</p> <p class="justify-content-between d-flex border p-2 bg-light">Between (justify-content-between)</p> <p class="justify-content-around d-flex border p-2 bg-light">Around (justify-content-around)</p> <p class="justify-content-evenly d-flex border p-2 bg-light">Evenly (justify-content-evenly)</p>

Flex align content (flex_align_content)

Use align-content utilities on flexbox containers to align flex items together on the cross axis. Choose from start (browser default), end, center, between, around, or stretch. Heads up! This property has no effect on single rows of flex items.

Start (align-content-start)

End (align-content-end)

Center (align-content-center)

Between (align-content-between)

Around (align-content-around)

Stretch (align-content-stretch)
<p class="align-content-start">Start (align-content-start)</p> <p class="align-content-end">End (align-content-end)</p> <p class="align-content-center">Center (align-content-center)</p> <p class="align-content-between">Between (align-content-between)</p> <p class="align-content-around">Around (align-content-around)</p> <p class="align-content-stretch">Stretch (align-content-stretch)</p>

Flex align items (flex_align_items)

Use align-self utilities on flexbox containers to change the alignment of flex items on the cross axis (the y-axis to start, x-axis if flex-direction: column). Choose from start, end, center, baseline, or stretch (browser default).

Start (align-items-start)

End (align-items-end)

Center (align-items-center)

Baseline (align-items-baseline)

Stretch (align-items-stretch)
<p class="align-items-start d-flex border p-2 bg-light">Start (align-items-start)</p> <p class="align-items-end d-flex border p-2 bg-light">End (align-items-end)</p> <p class="align-items-center d-flex border p-2 bg-light">Center (align-items-center)</p> <p class="align-items-baseline d-flex border p-2 bg-light">Baseline (align-items-baseline)</p> <p class="align-items-stretch d-flex border p-2 bg-light">Stretch (align-items-stretch)</p>

Flex align self (flex_align_self)

Use align-self utilities on flexbox items to individually change their alignment on the cross axis (the y-axis to start, x-axis if flex-direction: column). Choose from the same options as align-self: start, end, center, baseline, or stretch (browser default).

Start (align-self-start)

End (align-self-end)

Center (align-self-center)

Baseline (align-self-baseline)

Stretch (align-self-stretch)
<p class="align-self-start d-flex border p-2 bg-light">Start (align-self-start)</p> <p class="align-self-end d-flex border p-2 bg-light">End (align-self-end)</p> <p class="align-self-center d-flex border p-2 bg-light">Center (align-self-center)</p> <p class="align-self-baseline d-flex border p-2 bg-light">Baseline (align-self-baseline)</p> <p class="align-self-stretch d-flex border p-2 bg-light">Stretch (align-self-stretch)</p>

Flex fill (flex_fill)

Use the flex-fill class on a series of sibling elements to force them into widths equal to their content (or equal widths if their content does not surpass their border-boxes) while taking up all available horizontal space.

Fill (flex-fill)
<p class="flex-fill">Fill (flex-fill)</p>

Flex grow and shrink (flex_grow_shrink)

Use flex-grow-* utilities to toggle a flex item's ability to grow to fill available space. In the example below, the flex-grow-1 elements uses all available space it can, while allowing the remaining two flex items their necessary space. Use flex-shrink-* utilities to toggle a flex item's ability to shrink if necessary.

Grow 0 (flex-grow-0)

Grow 1 (flex-grow-1)

Shrink 0 (flex-shrink-0)

Shrink 1 (flex-shrink-1)
<p class="flex-grow-0">Grow 0 (flex-grow-0)</p> <p class="flex-grow-1">Grow 1 (flex-grow-1)</p> <p class="flex-shrink-0">Shrink 0 (flex-shrink-0)</p> <p class="flex-shrink-1">Shrink 1 (flex-shrink-1)</p>

Flex wrap (flex_wrap)

Change how flex items wrap in a flex container. Choose from no wrapping at all (the browser default) with flex-nowrap, wrapping with flex-wrap, or reverse wrapping with flex-wrap-reverse.

No wrap (flex-nowrap)

Wrap (flex-wrap)

Reverse wrap (flex-wrap-reverse)
<p class="flex-nowrap">No wrap (flex-nowrap)</p> <p class="flex-wrap">Wrap (flex-wrap)</p> <p class="flex-wrap-reverse">Reverse wrap (flex-wrap-reverse)</p>

Flex order (flex_order)

Change the visual order of specific flex items with a handful of order utilities. We only provide options for making an item first or last, as well as a reset to use the DOM order. As order takes any integer value from 0 to 5, add custom CSS for any additional values needed. Additionally there are also responsive order-first and order-last classes that change the order of an element by applying order: -1 and order: 6, respectively.

First (order-first)

Last (order-last)

Order 0 (order-0)

Order 1 (order-1)

Order 2 (order-2)

Order 3 (order-3)

Order 4 (order-4)

Order 5 (order-5)
<p class="order-first">First (order-first)</p> <p class="order-last">Last (order-last)</p> <p class="order-0">Order 0 (order-0)</p> <p class="order-1">Order 1 (order-1)</p> <p class="order-2">Order 2 (order-2)</p> <p class="order-3">Order 3 (order-3)</p> <p class="order-4">Order 4 (order-4)</p> <p class="order-5">Order 5 (order-5)</p>

Clearfix (clearfix)

Easily clear floats by adding <code>.clearfix</code> to the parent element.

Clearfix (clearfix)
<p class="clearfix">Clearfix (clearfix)</p>

Float (float)

These utility classes float an element to the left or right, or disable floating.

Start (float-start)

End (float-end)

None (float-none)
<p class="float-start">Start (float-start)</p> <p class="float-end">End (float-end)</p> <p class="float-none">None (float-none)</p>

Text selection (interactions_text_selection)

Change the way in which the content is selected when the user interacts with it.

Select all (user-select-all)

Default (user-select-auto)

Not selectable (user-select-none)
<p class="user-select-all">Select all (user-select-all)</p> <p class="user-select-auto">Default (user-select-auto)</p> <p class="user-select-none">Not selectable (user-select-none)</p>

Pointer events (interactions_pointer_events)

Bootstrap provides <code>.pe-none</code> and <code>.pe-auto</code> classes to prevent or add element interactions.

Not clickable (pe-none)

Default (pe-auto)
<p class="pe-none">Not clickable (pe-none)</p> <p class="pe-auto">Default (pe-auto)</p>

Make any HTML element or Bootstrap component clickable by 'stretching' a nested link via CSS.

Change the alpha opacity of the link rgba() color value with utilities. Be aware that changes to a color's opacity can lead to links with insufficient contrast.

You can even change the opacity level on hover.

Change the underline's color independent of the link text color.

Change the underline's opacity. Requires adding .link-underline to first set an rgba() color we use to then modify the alpha opacity.

Change the underline's distance from your text. Offset is set in em units to automatically scale with the element's current font-size.

Object fit (object_fit)

Contain (object-fit-contain)

Cover (object-fit-cover)

Fill (object-fit-fill)

Scale (object-fit-scale)

None (object-fit-none)
<p class="object-fit-contain">Contain (object-fit-contain)</p> <p class="object-fit-cover">Cover (object-fit-cover)</p> <p class="object-fit-fill">Fill (object-fit-fill)</p> <p class="object-fit-scale">Scale (object-fit-scale)</p> <p class="object-fit-none">None (object-fit-none)</p>

Vertical rule (vertical_rule)

Vertical rules are inspired by the <code>&lt;hr&gt;</code> element, allowing you to create vertical dividers in common layouts.

Vertical rule (vr)
<p class="vr ms-2">Vertical rule (vr)</p>

Position (position)

Use these helpers for quickly configuring the position of an element.

Fixed top (fixed-top)

Fixed bottom (fixed-bottom)

Sticky top (sticky-top)

Sticky top from small (sticky-sm-top)

Sticky top from medium (sticky-md-top)

Sticky top from large (sticky-lg-top)

Sticky top from extra large (sticky-xl-top)

Sticky top from extra extra large (sticky-xxl-top)

Sticky bottom (sticky-bottom)

Sticky bottom from small (sticky-sm-bottom)

Sticky bottom from medium (sticky-md-bottom)

Sticky bottom from large (sticky-lg-bottom)

Sticky bottom from extra large (sticky-xl-bottom)

Sticky bottom from extra extra large (sticky-xxl-bottom)
<p class="fixed-top">Fixed top (fixed-top)</p> <p class="fixed-bottom">Fixed bottom (fixed-bottom)</p> <p class="sticky-top">Sticky top (sticky-top)</p> <p class="sticky-sm-top">Sticky top from small (sticky-sm-top)</p> <p class="sticky-md-top">Sticky top from medium (sticky-md-top)</p> <p class="sticky-lg-top">Sticky top from large (sticky-lg-top)</p> <p class="sticky-xl-top">Sticky top from extra large (sticky-xl-top)</p> <p class="sticky-xxl-top">Sticky top from extra extra large (sticky-xxl-top)</p> <p class="sticky-bottom">Sticky bottom (sticky-bottom)</p> <p class="sticky-sm-bottom">Sticky bottom from small (sticky-sm-bottom)</p> <p class="sticky-md-bottom">Sticky bottom from medium (sticky-md-bottom)</p> <p class="sticky-lg-bottom">Sticky bottom from large (sticky-lg-bottom)</p> <p class="sticky-xl-bottom">Sticky bottom from extra large (sticky-xl-bottom)</p> <p class="sticky-xxl-bottom">Sticky bottom from extra extra large (sticky-xxl-bottom)</p>

Position values (position_position)

Quick positioning classes are available, though they are not responsive.

Static (position-static)

Relative (position-relative)

Absolute (position-absolute)

Fixed (position-fixed)

Sticky (position-sticky)
<p class="position-static">Static (position-static)</p> <p class="position-relative">Relative (position-relative)</p> <p class="position-absolute">Absolute (position-absolute)</p> <p class="position-fixed">Fixed (position-fixed)</p> <p class="position-sticky">Sticky (position-sticky)</p>

Arrange element vertically (position_arrange_vertical)

Top 0% (top-0)

Top 50% (top-50)

Top 100% (top-100)

Bottom 0% (bottom-0)

Bottom 50% (bottom-50)

Bottom 100% (bottom-100)
<p class="top-0">Top 0% (top-0)</p> <p class="top-50">Top 50% (top-50)</p> <p class="top-100">Top 100% (top-100)</p> <p class="bottom-0">Bottom 0% (bottom-0)</p> <p class="bottom-50">Bottom 50% (bottom-50)</p> <p class="bottom-100">Bottom 100% (bottom-100)</p>

Arrange element horizontally (position_arrange_horizontal)

Start 0% (start-0)

Start 50% (start-50)

Start 100% (start-100)

End 0% (end-0)

End 50% (end-50)

End 100% (end-100)
<p class="start-0">Start 0% (start-0)</p> <p class="start-50">Start 50% (start-50)</p> <p class="start-100">Start 100% (start-100)</p> <p class="end-0">End 0% (end-0)</p> <p class="end-50">End 50% (end-50)</p> <p class="end-100">End 100% (end-100)</p>

Center element (position_center)

In addition, you can also center the elements with the transform utility class <code>.translate-middle</code>.

Center (translate-middle)

Center horizontally (translate-middle-x)

Center vertically (translate-middle-y)
<p class="translate-middle">Center (translate-middle)</p> <p class="translate-middle-x">Center horizontally (translate-middle-x)</p> <p class="translate-middle-y">Center vertically (translate-middle-y)</p>

Width (sizing_width)

Make element as wide as its parent element or the viewport.

25% width (w-25)

50% width (w-50)

75% width (w-75)

100% width (w-100)

Auto (w-auto)

Max-width 100% (mw-100)

Width 100% of viewport (vw-100)

Min-width 100% of viewport (min-vw-100)
<p class="w-25">25% width (w-25)</p> <p class="w-50">50% width (w-50)</p> <p class="w-75">75% width (w-75)</p> <p class="w-100">100% width (w-100)</p> <p class="w-auto">Auto (w-auto)</p> <p class="mw-100">Max-width 100% (mw-100)</p> <p class="vw-100">Width 100% of viewport (vw-100)</p> <p class="min-vw-100">Min-width 100% of viewport (min-vw-100)</p>

Height (sizing_height)

Make element as tall as its parent element or the viewport.

25% height (h-25)

50% height (h-50)

75% height (h-75)

100% height (h-100)

Auto (h-auto)

Max-height 100% (mh-100)

Height 100% of viewport (vh-100)

Min-height 100% of viewport (min-vh-100)
<p class="h-25">25% height (h-25)</p> <p class="h-50">50% height (h-50)</p> <p class="h-75">75% height (h-75)</p> <p class="h-100">100% height (h-100)</p> <p class="h-auto">Auto (h-auto)</p> <p class="mh-100">Max-height 100% (mh-100)</p> <p class="vh-100">Height 100% of viewport (vh-100)</p> <p class="min-vh-100">Min-height 100% of viewport (min-vh-100)</p>

Margin top (spacing_margin_top)

0 (mt-0)

1 (mt-1)

2 (mt-2)

3 (mt-3)

4 (mt-4)

5 (mt-5)

Auto (mt-auto)
<p class="mt-0 border p-2 bg-light">0 (mt-0)</p> <p class="mt-1 border p-2 bg-light">1 (mt-1)</p> <p class="mt-2 border p-2 bg-light">2 (mt-2)</p> <p class="mt-3 border p-2 bg-light">3 (mt-3)</p> <p class="mt-4 border p-2 bg-light">4 (mt-4)</p> <p class="mt-5 border p-2 bg-light">5 (mt-5)</p> <p class="mt-auto border p-2 bg-light">Auto (mt-auto)</p>

Margin bottom (spacing_margin_bottom)

0 (mb-0)

1 (mb-1)

2 (mb-2)

3 (mb-3)

4 (mb-4)

5 (mb-5)

Auto (mb-auto)
<p class="mb-0 border p-2 bg-light">0 (mb-0)</p> <p class="mb-1 border p-2 bg-light">1 (mb-1)</p> <p class="mb-2 border p-2 bg-light">2 (mb-2)</p> <p class="mb-3 border p-2 bg-light">3 (mb-3)</p> <p class="mb-4 border p-2 bg-light">4 (mb-4)</p> <p class="mb-5 border p-2 bg-light">5 (mb-5)</p> <p class="mb-auto border p-2 bg-light">Auto (mb-auto)</p>

Margin start (spacing_margin_start)

0 (ms-0)

1 (ms-1)

2 (ms-2)

3 (ms-3)

4 (ms-4)

5 (ms-5)

Auto (ms-auto)
<p class="ms-0 border p-2 bg-light">0 (ms-0)</p> <p class="ms-1 border p-2 bg-light">1 (ms-1)</p> <p class="ms-2 border p-2 bg-light">2 (ms-2)</p> <p class="ms-3 border p-2 bg-light">3 (ms-3)</p> <p class="ms-4 border p-2 bg-light">4 (ms-4)</p> <p class="ms-5 border p-2 bg-light">5 (ms-5)</p> <p class="ms-auto border p-2 bg-light">Auto (ms-auto)</p>

Margin end (spacing_margin_end)

0 (me-0)

1 (me-1)

2 (me-2)

3 (me-3)

4 (me-4)

5 (me-5)

Auto (me-auto)
<p class="me-0 border p-2 bg-light">0 (me-0)</p> <p class="me-1 border p-2 bg-light">1 (me-1)</p> <p class="me-2 border p-2 bg-light">2 (me-2)</p> <p class="me-3 border p-2 bg-light">3 (me-3)</p> <p class="me-4 border p-2 bg-light">4 (me-4)</p> <p class="me-5 border p-2 bg-light">5 (me-5)</p> <p class="me-auto border p-2 bg-light">Auto (me-auto)</p>

Margin (spacing_margin)

0 (m-0)

1 (m-1)

2 (m-2)

3 (m-3)

4 (m-4)

5 (m-5)

Auto (m-auto)
<p class="m-0 border p-2 bg-light">0 (m-0)</p> <p class="m-1 border p-2 bg-light">1 (m-1)</p> <p class="m-2 border p-2 bg-light">2 (m-2)</p> <p class="m-3 border p-2 bg-light">3 (m-3)</p> <p class="m-4 border p-2 bg-light">4 (m-4)</p> <p class="m-5 border p-2 bg-light">5 (m-5)</p> <p class="m-auto border p-2 bg-light">Auto (m-auto)</p>

Padding (spacing_padding)

0 (p-0)

1 (p-1)

2 (p-2)

3 (p-3)

4 (p-4)

5 (p-5)
<p class="p-0 border bg-light">0 (p-0)</p> <p class="p-1 border bg-light">1 (p-1)</p> <p class="p-2 border bg-light">2 (p-2)</p> <p class="p-3 border bg-light">3 (p-3)</p> <p class="p-4 border bg-light">4 (p-4)</p> <p class="p-5 border bg-light">5 (p-5)</p>

Padding top (spacing_padding_top)

0 (pt-0)

1 (pt-1)

2 (pt-2)

3 (pt-3)

4 (pt-4)

5 (pt-5)
<p class="pt-0 border bg-light">0 (pt-0)</p> <p class="pt-1 border bg-light">1 (pt-1)</p> <p class="pt-2 border bg-light">2 (pt-2)</p> <p class="pt-3 border bg-light">3 (pt-3)</p> <p class="pt-4 border bg-light">4 (pt-4)</p> <p class="pt-5 border bg-light">5 (pt-5)</p>

Padding bottom (spacing_padding_bottom)

0 (pb-0)

1 (pb-1)

2 (pb-2)

3 (pb-3)

4 (pb-4)

5 (pb-5)
<p class="pb-0 border bg-light">0 (pb-0)</p> <p class="pb-1 border bg-light">1 (pb-1)</p> <p class="pb-2 border bg-light">2 (pb-2)</p> <p class="pb-3 border bg-light">3 (pb-3)</p> <p class="pb-4 border bg-light">4 (pb-4)</p> <p class="pb-5 border bg-light">5 (pb-5)</p>

Padding start (spacing_padding_start)

0 (ps-0)

1 (ps-1)

2 (ps-2)

3 (ps-3)

4 (ps-4)

5 (ps-5)
<p class="ps-0 border bg-light">0 (ps-0)</p> <p class="ps-1 border bg-light">1 (ps-1)</p> <p class="ps-2 border bg-light">2 (ps-2)</p> <p class="ps-3 border bg-light">3 (ps-3)</p> <p class="ps-4 border bg-light">4 (ps-4)</p> <p class="ps-5 border bg-light">5 (ps-5)</p>

Padding end (spacing_padding_end)

0 (pe-0)

1 (pe-1)

2 (pe-2)

3 (pe-3)

4 (pe-4)

5 (pe-5)
<p class="pe-0 border bg-light text-end">0 (pe-0)</p> <p class="pe-1 border bg-light text-end">1 (pe-1)</p> <p class="pe-2 border bg-light text-end">2 (pe-2)</p> <p class="pe-3 border bg-light text-end">3 (pe-3)</p> <p class="pe-4 border bg-light text-end">4 (pe-4)</p> <p class="pe-5 border bg-light text-end">5 (pe-5)</p>

Horizontal centering (spacing_horizontal_centering)

An .mx-auto class for horizontally centering fixed-width block level content—that is, content that has display: block and a width set—by setting the horizontal margins to auto.

Horizontal centering (mx-auto)
<p class="mx-auto">Horizontal centering (mx-auto)</p>

Vertical alignment (vertical_align)

Change the alignment of elements. Note that vertical-align only affects inline, inline-block, inline-table, and table cell elements.

Baseline (align-baseline)

Top (align-top)

Middle (align-middle)

Bottom (align-bottom)

Text-bottom (align-text-bottom)

Text-top (align-text-top)
<p class="align-baseline">Baseline (align-baseline)</p> <p class="align-top">Top (align-top)</p> <p class="align-middle">Middle (align-middle)</p> <p class="align-bottom">Bottom (align-bottom)</p> <p class="align-text-bottom">Text-bottom (align-text-bottom)</p> <p class="align-text-top">Text-top (align-text-top)</p>

Text truncate (text_text_truncate)

For longer content, you can add a <code>.text-truncate</code> class to truncate the text with an ellipsis. Requires <code>display: inline-block</code> or <code>display: block.</code>

Truncate (text-truncate)
<p class="text-truncate">Truncate (text-truncate)</p>

Color (colors_color)

Convey meaning through color with a handful of color utility classes.

Primary (text-primary)

Primary emphasis (text-primary-emphasis)

Secondary (text-secondary)

Secondary emphasis (text-secondary-emphasis)

Success (text-success)

Success emphasis (text-success-emphasis)

Danger (text-danger)

Danger emphasis (text-danger-emphasis)

Warning (text-warning)

Warning emphasis (text-warning-emphasis)

Info (text-info)

Info emphasis (text-info-emphasis)

Light (text-light)

Light emphasis (text-light-emphasis)

Dark (text-dark)

Dark emphasis (text-dark-emphasis)

Body (text-body)

Body emphasis (text-body-emphasis)

Body secondary (text-body-secondary)

Body tertiary (text-body-tertiary)

White (text-white)

Black (text-black)

Black 50 (deprecated) (text-black-50)

White 50 (deprecated) (text-white-50)

Muted (deprecated) (text-muted)

Reset (text-reset)
<p class="text-primary">Primary (text-primary)</p> <p class="text-primary-emphasis">Primary emphasis (text-primary-emphasis)</p> <p class="text-secondary">Secondary (text-secondary)</p> <p class="text-secondary-emphasis">Secondary emphasis (text-secondary-emphasis)</p> <p class="text-success">Success (text-success)</p> <p class="text-success-emphasis">Success emphasis (text-success-emphasis)</p> <p class="text-danger">Danger (text-danger)</p> <p class="text-danger-emphasis">Danger emphasis (text-danger-emphasis)</p> <p class="text-warning">Warning (text-warning)</p> <p class="text-warning-emphasis">Warning emphasis (text-warning-emphasis)</p> <p class="text-info">Info (text-info)</p> <p class="text-info-emphasis">Info emphasis (text-info-emphasis)</p> <p class="text-light">Light (text-light)</p> <p class="text-light-emphasis">Light emphasis (text-light-emphasis)</p> <p class="text-dark">Dark (text-dark)</p> <p class="text-dark-emphasis">Dark emphasis (text-dark-emphasis)</p> <p class="text-body">Body (text-body)</p> <p class="text-body-emphasis">Body emphasis (text-body-emphasis)</p> <p class="text-body-secondary">Body secondary (text-body-secondary)</p> <p class="text-body-tertiary">Body tertiary (text-body-tertiary)</p> <p class="text-white">White (text-white)</p> <p class="text-black">Black (text-black)</p> <p class="text-black-50">Black 50 (deprecated) (text-black-50)</p> <p class="text-white-50">White 50 (deprecated) (text-white-50)</p> <p class="text-muted">Muted (deprecated) (text-muted)</p> <p class="text-reset">Reset (text-reset)</p>

Opacity (colors_opacity)

100% (text-opacity-100)

75% (text-opacity-75)

50% (text-opacity-50)

25% (text-opacity-25)
<p class="text-opacity-100 text-primary">100% (text-opacity-100)</p> <p class="text-opacity-75 text-primary">75% (text-opacity-75)</p> <p class="text-opacity-50 text-primary">50% (text-opacity-50)</p> <p class="text-opacity-25 text-primary">25% (text-opacity-25)</p>

Font weight (text_font_weight)

Quickly change the weight (boldness) of text.

Bold (fw-bold)

Bolder (relative to the parent element) (fw-bolder)

Semibold (fw-semibold)

Normal (fw-normal)

Light (fw-light)

Lighter (relative to the parent element) (fw-lighter)
<p class="fw-bold">Bold (fw-bold)</p> <p class="fw-bolder">Bolder (relative to the parent element) (fw-bolder)</p> <p class="fw-semibold">Semibold (fw-semibold)</p> <p class="fw-normal">Normal (fw-normal)</p> <p class="fw-light">Light (fw-light)</p> <p class="fw-lighter">Lighter (relative to the parent element) (fw-lighter)</p>

Font italics (text_font_italics)

Quickly italicize text.

Italic (fst-italic)

Normal (fst-normal)
<p class="fst-italic">Italic (fst-italic)</p> <p class="fst-normal">Normal (fst-normal)</p>

Line height (text_line_height)

Change the line height.

1 (lh-1)

Small (lh-sm)

Base (lh-base)

Large (lh-lg)
<p class="lh-1">1 (lh-1)</p> <p class="lh-sm">Small (lh-sm)</p> <p class="lh-base">Base (lh-base)</p> <p class="lh-lg">Large (lh-lg)</p>

Monospace (text_font_monospace)

Change a selection to the monospace font stack.

Monospace (font-monospace)
<p class="font-monospace">Monospace (font-monospace)</p>

Text decoration (text_text_decoration)

Decorate text in components with text decoration classes.

Underline (text-decoration-underline)

Line through (text-decoration-line-through)

None (text-decoration-none)
<p class="text-decoration-underline">Underline (text-decoration-underline)</p> <p class="text-decoration-line-through">Line through (text-decoration-line-through)</p> <p class="text-decoration-none">None (text-decoration-none)</p>

Text alignment (text_text_alignment)

Easily realign text to components with text alignment classes.

Start (text-start)

Center (text-center)

End (text-end)
<p class="text-start border p-2 bg-light">Start (text-start)</p> <p class="text-center border p-2 bg-light">Center (text-center)</p> <p class="text-end border p-2 bg-light">End (text-end)</p>

Text wrapping and overflow (text_text_wrapping)

Wrap (text-wrap)

No wrap (text-nowrap)
<p class="text-wrap border p-2 bg-light">Wrap (text-wrap)</p> <p class="text-nowrap border p-2 bg-light">No wrap (text-nowrap)</p>

Word break (text_text_word_break)

Break (text-break)
<p class="text-break border p-2 bg-light">Break (text-break)</p>

Text transform (text_text_transform)

Transform text in components with text capitalization classes.

Lowercase (text-lowercase)

Uppercase (text-uppercase)

Capitalize (text-capitalize)
<p class="text-lowercase">Lowercase (text-lowercase)</p> <p class="text-uppercase">Uppercase (text-uppercase)</p> <p class="text-capitalize">Capitalize (text-capitalize)</p>

Typography (typography)

.h1 through .h6 classes are available, for when you want to match the font styling of a heading but cannot use the associated HTML element. Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using a <strong>display heading</strong> a larger, slightly more opinionated heading style. Keep in mind these headings are not responsive by default.

Heading 1 (h1)

Heading 2 (h2)

Heading 3 (h3)

Heading 4 (h4)

Heading 5 (h5)

Heading 6 (h6)

Display heading 1 (display-1)

Display heading 2 (display-2)

Display heading 3 (display-3)

Display heading 4 (display-4)

Display heading 5 (display-5)

Display heading 6 (display-6)

Lead (lead)

Font size 1 (fs-1)

Font size 2 (fs-2)

Font size 3 (fs-3)

Font size 4 (fs-4)

Font size 5 (fs-5)

Font size 6 (fs-6)
<p class="h1">Heading 1 (h1)</p> <p class="h2">Heading 2 (h2)</p> <p class="h3">Heading 3 (h3)</p> <p class="h4">Heading 4 (h4)</p> <p class="h5">Heading 5 (h5)</p> <p class="h6">Heading 6 (h6)</p> <p class="display-1">Display heading 1 (display-1)</p> <p class="display-2">Display heading 2 (display-2)</p> <p class="display-3">Display heading 3 (display-3)</p> <p class="display-4">Display heading 4 (display-4)</p> <p class="display-5">Display heading 5 (display-5)</p> <p class="display-6">Display heading 6 (display-6)</p> <p class="lead">Lead (lead)</p> <p class="fs-1">Font size 1 (fs-1)</p> <p class="fs-2">Font size 2 (fs-2)</p> <p class="fs-3">Font size 3 (fs-3)</p> <p class="fs-4">Font size 4 (fs-4)</p> <p class="fs-5">Font size 5 (fs-5)</p> <p class="fs-6">Font size 6 (fs-6)</p>

Thumbnail (img_thumbnail)

Give an image a rounded border appearance.

Thumbnail (img-thumbnail)
<p class="img-thumbnail">Thumbnail (img-thumbnail)</p>

Visually hidden (visually_hidden)

Visually hide an element while still allowing it to be exposed to assistive technologies (such as screen readers) with <code>.visually-hidden</code>. Use <code>.visually-hidden-focusable</code> to visually hide an element by default, but to display it when it's focused (e.g. by a keyboard-only user). <code>.visually-hidden-focusable</code> can also be applied to a container–thanks to <code>:focus-within</code>, the container will be displayed when any child element of the container receives focus.

Visually hidden focusable (visually-hidden-focusable)
<p class="visually-hidden">Visually hidden (visually-hidden)</p> <p class="visually-hidden-focusable">Visually hidden focusable (visually-hidden-focusable)</p>

Opacity (opacity)

The opacity property sets the opacity level for an element. The opacity level describes the transparency level, where 1 is not transparent at all, .5 is 50% visible, and 0 is completely transparent.

100% (opacity-100)

75% (opacity-75)

50% (opacity-50)

25% (opacity-25)

0% (opacity-0)
<p class="opacity-100 border p-2 bg-light">100% (opacity-100)</p> <p class="opacity-75 border p-2 bg-light">75% (opacity-75)</p> <p class="opacity-50 border p-2 bg-light">50% (opacity-50)</p> <p class="opacity-25 border p-2 bg-light">25% (opacity-25)</p> <p class="opacity-0 border p-2 bg-light">0% (opacity-0)</p>

Overflow (overflow)

Configure how content overflows an element.

Auto (overflow-auto)

Hidden (overflow-hidden)

Visible (overflow-visible)

Scroll (overflow-scroll)
<p class="overflow-auto">Auto (overflow-auto)</p> <p class="overflow-hidden">Hidden (overflow-hidden)</p> <p class="overflow-visible">Visible (overflow-visible)</p> <p class="overflow-scroll">Scroll (overflow-scroll)</p>

Overflow horizontal (overflow_horizontal)

Auto (overflow-x-auto)

Hidden (overflow-x-hidden)

Visible (overflow-x-visible)

Scroll (overflow-x-scroll)
<p class="overflow-x-auto">Auto (overflow-x-auto)</p> <p class="overflow-x-hidden">Hidden (overflow-x-hidden)</p> <p class="overflow-x-visible">Visible (overflow-x-visible)</p> <p class="overflow-x-scroll">Scroll (overflow-x-scroll)</p>

Overflow vertical (overflow_vertical)

Auto (overflow-y-auto)

Hidden (overflow-y-hidden)

Visible (overflow-y-visible)

Scroll (overflow-y-scroll)
<p class="overflow-y-auto">Auto (overflow-y-auto)</p> <p class="overflow-y-hidden">Hidden (overflow-y-hidden)</p> <p class="overflow-y-visible">Visible (overflow-y-visible)</p> <p class="overflow-y-scroll">Scroll (overflow-y-scroll)</p>

Visibility (visibility)

Control the visibility of elements without modifying their display. These classes do not modify the display value and do not affect layout; <code>.invisible</code> elements still take up space in the page.

Visible (visible)
<p class="visible">Visible (visible)</p> <p class="invisible">Invisible (invisible)</p>

Z-index (z-index)

Use our low-level z-index utilities to quickly change the stack level of an element or component.

3 (z-3)

2 (z-2)

1 (z-1)

0 (z-0)

-1 (z-n1)
<p class="z-3">3 (z-3)</p> <p class="z-2">2 (z-2)</p> <p class="z-1">1 (z-1)</p> <p class="z-0">0 (z-0)</p> <p class="z-n1">-1 (z-n1)</p>