Skip to main content

Utilities

Utility classes are single-purpose CSS classes that provide a simple way to style an element without having to write custom CSS. They hook into our predefined spacing, sizing, and color scales, and they prevent the CSS that ships with an app from scaling with each new feature added.

Other globally available classes that support component styling are not listed here, as we recommend using the actual components instead.

align

  • align-baseline
  • align-bottom
  • align-middle
  • align-text-bottom
  • align-text-top
  • align-top

background

  • bg-black
  • bg-blue
  • bg-blue-50
  • bg-blue-100
  • bg-blue-200
  • bg-blue-300
  • bg-blue-400
  • bg-blue-500
  • bg-blue-600
  • bg-blue-700
  • bg-blue-800
  • bg-blue-900
  • bg-dark-blue
  • bg-error-50
  • bg-error-500
  • bg-error-900
  • bg-gray-50
  • bg-gray-100
  • bg-gray-150
  • bg-gray-200
  • bg-gray-300
  • bg-gray-400
  • bg-gray-500
  • bg-gray-600
  • bg-gray-700
  • bg-gray-800
  • bg-gray-900
  • bg-medium-blue
  • bg-orange-50
  • bg-orange-100
  • bg-orange-200
  • bg-orange-300
  • bg-orange-400
  • bg-orange-500
  • bg-orange-600
  • bg-orange-700
  • bg-orange-800
  • bg-orange-900
  • bg-soft-blue
  • bg-success-50
  • bg-success-500
  • bg-success-900
  • bg-transparent
  • bg-warm-orange
  • bg-warning-50
  • bg-warning-500
  • bg-warning-900
  • bg-white

borders

  • border
  • border-0
  • border-blue-50
  • border-blue-100
  • border-blue-200
  • border-blue-300
  • border-blue-400
  • border-blue-500
  • border-blue-600
  • border-blue-700
  • border-blue-800
  • border-blue-900
  • border-bottom
  • border-bottom-0
  • border-dark-blue
  • border-left
  • border-left-0
  • border-medium-blue
  • border-right
  • border-right-0
  • border-soft-blue
  • border-top
  • border-top-0
  • border-warm-orange
  • border-white
  • rounded
  • rounded-0
  • rounded-bottom
  • rounded-circle
  • rounded-left
  • rounded-lg
  • rounded-pill
  • rounded-right
  • rounded-sm
  • rounded-top
  • rounded-xs

clearfix

  • clearfix

code

  • pre-scrollable

display

  • d-*-block
  • d-*-flex
  • d-*-inline
  • d-*-inline-block
  • d-*-inline-flex
  • d-*-none
  • d-print-block
  • d-print-flex
  • d-print-inline
  • d-print-inline-block
  • d-print-inline-flex
  • d-print-none
  • d-print-table
  • d-print-table-cell
  • d-print-table-row
  • d-*-table
  • d-*-table-cell
  • d-*-table-row

embed

  • embed-responsive
  • embed-responsive-1by1
  • embed-responsive-4by3
  • embed-responsive-16by9
  • embed-responsive-21by9
  • embed-responsive-item

flex

  • align-content-*-around
  • align-content-*-between
  • align-content-*-center
  • align-content-*-end
  • align-content-*-start
  • align-content-*-stretch
  • align-items-*-baseline
  • align-items-*-center
  • align-items-*-end
  • align-items-*-start
  • align-items-*-stretch
  • align-self-*-auto
  • align-self-*-baseline
  • align-self-*-center
  • align-self-*-end
  • align-self-*-start
  • align-self-*-stretch
  • flex-*-column
  • flex-*-column-reverse
  • flex-*-fill
  • flex-*-grow-0
  • flex-*-grow-1
  • flex-*-nowrap
  • flex-*-row
  • flex-*-row-reverse
  • flex-*-shrink-0
  • flex-*-shrink-1
  • flex-*-wrap
  • flex-*-wrap-reverse
  • justify-content-*-around
  • justify-content-*-between
  • justify-content-*-center
  • justify-content-*-end
  • justify-content-*-start

float

  • float-*-left
  • float-*-none
  • float-*-right

images

  • figure
  • figure-caption
  • figure-img
  • img-fluid
  • img-thumbnail

interactions

  • user-select-all
  • user-select-auto
  • user-select-none

margin

  • m-*-0
  • m-*-25
  • m-*-50
  • m-*-100
  • m-*-150
  • m-*-200
  • m-*-300
  • m-*-400
  • m-*-500
  • m-*-600
  • m-*-800
  • m-*-auto
  • m-*-n25
  • m-*-n50
  • m-*-n100
  • m-*-n150
  • m-*-n200
  • m-*-n300
  • m-*-n400
  • m-*-n500
  • m-*-n600
  • m-*-n800
  • mb-*-0
  • mb-*-25
  • mb-*-50
  • mb-*-100
  • mb-*-150
  • mb-*-200
  • mb-*-300
  • mb-*-400
  • mb-*-500
  • mb-*-600
  • mb-*-800
  • mb-*-auto
  • mb-*-n25
  • mb-*-n50
  • mb-*-n100
  • mb-*-n150
  • mb-*-n200
  • mb-*-n300
  • mb-*-n400
  • mb-*-n500
  • mb-*-n600
  • mb-*-n800
  • ml-*-0
  • ml-*-25
  • ml-*-50
  • ml-*-100
  • ml-*-150
  • ml-*-200
  • ml-*-300
  • ml-*-400
  • ml-*-500
  • ml-*-600
  • ml-*-800
  • ml-*-auto
  • ml-*-n25
  • ml-*-n50
  • ml-*-n100
  • ml-*-n150
  • ml-*-n200
  • ml-*-n300
  • ml-*-n400
  • ml-*-n500
  • ml-*-n600
  • ml-*-n800
  • mr-*-0
  • mr-*-25
  • mr-*-50
  • mr-*-100
  • mr-*-150
  • mr-*-200
  • mr-*-300
  • mr-*-400
  • mr-*-500
  • mr-*-600
  • mr-*-800
  • mr-*-auto
  • mr-*-n25
  • mr-*-n50
  • mr-*-n100
  • mr-*-n150
  • mr-*-n200
  • mr-*-n300
  • mr-*-n400
  • mr-*-n500
  • mr-*-n600
  • mr-*-n800
  • mt-*-0
  • mt-*-25
  • mt-*-50
  • mt-*-100
  • mt-*-150
  • mt-*-200
  • mt-*-300
  • mt-*-400
  • mt-*-500
  • mt-*-600
  • mt-*-800
  • mt-*-auto
  • mt-*-n25
  • mt-*-n50
  • mt-*-n100
  • mt-*-n150
  • mt-*-n200
  • mt-*-n300
  • mt-*-n400
  • mt-*-n500
  • mt-*-n600
  • mt-*-n800
  • mx-*-0
  • mx-*-25
  • mx-*-50
  • mx-*-100
  • mx-*-150
  • mx-*-200
  • mx-*-300
  • mx-*-400
  • mx-*-500
  • mx-*-600
  • mx-*-800
  • mx-*-auto
  • mx-*-n25
  • mx-*-n50
  • mx-*-n100
  • mx-*-n150
  • mx-*-n200
  • mx-*-n300
  • mx-*-n400
  • mx-*-n500
  • mx-*-n600
  • mx-*-n800
  • my-*-0
  • my-*-25
  • my-*-50
  • my-*-100
  • my-*-150
  • my-*-200
  • my-*-300
  • my-*-400
  • my-*-500
  • my-*-600
  • my-*-800
  • my-*-auto
  • my-*-n25
  • my-*-n50
  • my-*-n100
  • my-*-n150
  • my-*-n200
  • my-*-n300
  • my-*-n400
  • my-*-n500
  • my-*-n600
  • my-*-n800

order

  • order-*-0
  • order-*-1
  • order-*-2
  • order-*-3
  • order-*-4
  • order-*-5
  • order-*-6
  • order-*-7
  • order-*-8
  • order-*-9
  • order-*-10
  • order-*-11
  • order-*-12
  • order-*-first
  • order-*-last

overflow

  • overflow-auto
  • overflow-hidden
  • overflow-visible

padding

  • p-*-0
  • p-*-25
  • p-*-50
  • p-*-100
  • p-*-150
  • p-*-200
  • p-*-300
  • p-*-400
  • p-*-500
  • p-*-600
  • p-*-800
  • pb-*-0
  • pb-*-25
  • pb-*-50
  • pb-*-100
  • pb-*-150
  • pb-*-200
  • pb-*-300
  • pb-*-400
  • pb-*-500
  • pb-*-600
  • pb-*-800
  • pl-*-0
  • pl-*-25
  • pl-*-50
  • pl-*-100
  • pl-*-150
  • pl-*-200
  • pl-*-300
  • pl-*-400
  • pl-*-500
  • pl-*-600
  • pl-*-800
  • pr-*-0
  • pr-*-25
  • pr-*-50
  • pr-*-100
  • pr-*-150
  • pr-*-200
  • pr-*-300
  • pr-*-400
  • pr-*-500
  • pr-*-600
  • pr-*-800
  • pt-*-0
  • pt-*-25
  • pt-*-50
  • pt-*-100
  • pt-*-150
  • pt-*-200
  • pt-*-300
  • pt-*-400
  • pt-*-500
  • pt-*-600
  • pt-*-800
  • px-*-0
  • px-*-25
  • px-*-50
  • px-*-100
  • px-*-150
  • px-*-200
  • px-*-300
  • px-*-400
  • px-*-500
  • px-*-600
  • px-*-800
  • py-*-0
  • py-*-25
  • py-*-50
  • py-*-100
  • py-*-150
  • py-*-200
  • py-*-300
  • py-*-400
  • py-*-500
  • py-*-600
  • py-*-800

position

  • abs-center
  • fixed-bottom
  • fixed-top
  • position-absolute
  • position-fixed
  • position-relative
  • position-static
  • position-sticky
  • sticky-top

screenreaders

  • sr-only
  • sr-only-focusable

shadows

  • shadow
  • shadow-lg
  • shadow-none
  • shadow-sm

sizing

  • h-25
  • h-50
  • h-75
  • h-100
  • h-auto
  • mh-100
  • min-vh-100
  • min-vw-100
  • min-width-*-4
  • min-width-*-5
  • min-width-*-6
  • min-width-*-7
  • mw-100
  • vh-100
  • vw-100
  • w-25
  • w-50
  • w-75
  • w-100
  • w-*-auto

stretched link

  • stretched-link

text color

  • text-black
  • text-blue
  • text-blue-50
  • text-blue-100
  • text-blue-200
  • text-blue-300
  • text-blue-400
  • text-blue-500
  • text-blue-600
  • text-blue-700
  • text-blue-800
  • text-blue-900
  • text-body
  • text-dark-blue
  • text-gray-100
  • text-gray-150
  • text-gray-200
  • text-gray-300
  • text-gray-400
  • text-gray-500
  • text-gray-600
  • text-gray-700
  • text-gray-800
  • text-gray-900
  • text-medium-blue
  • text-muted
  • text-orange-50
  • text-orange-100
  • text-orange-200
  • text-orange-300
  • text-orange-400
  • text-orange-500
  • text-orange-600
  • text-orange-700
  • text-orange-800
  • text-orange-900
  • text-reset
  • text-soft-blue
  • text-warm-orange
  • text-white

text style

  • font-italic
  • font-size-*-50
  • font-size-*-75
  • font-size-*-100
  • font-size-*-200
  • font-size-*-300
  • font-size-*-400
  • font-size-*-500
  • font-size-*-600
  • font-size-*-700
  • font-size-*-800
  • font-size-*-900
  • font-size-*-base
  • font-size-h1
  • font-size-h2
  • font-size-h3
  • font-size-h4
  • font-size-h5
  • font-size-h6
  • font-size-*-lg
  • font-size-*-sm
  • font-size-*-xs
  • font-weight-bold
  • font-weight-bolder
  • font-weight-boldest
  • font-weight-light
  • font-weight-lighter
  • font-weight-lightest
  • font-weight-normal
  • font-weight-semibold
  • line-height-base
  • text-break
  • text-capitalize
  • text-*-center
  • text-decoration-none
  • text-hide
  • text-justify
  • text-*-left
  • text-lowercase
  • text-monospace
  • text-nowrap
  • text-*-right
  • text-truncate
  • text-uppercase
  • text-wrap

typography

  • blockquote
  • blockquote-footer
  • eyebrow
  • h1
  • h2
  • h3
  • h4
  • h5
  • h6
  • initialism
  • lead
  • list-inline
  • list-inline-item
  • list-unstyled
  • mark
  • post1
  • post2
  • post3
  • small

visibility

  • invisible
  • visible