Utility classes

For faster mobile-friendly and responsive development, Bootstrap includes dozens of utility classes for showing, hiding, aligning, and spacing content.

Bootstrap utilities
Class Name Description Options
bg-[options] Theme background colors classes .bg-gradient-primary
.bg-gradient-tint
.bg-gradient-blur
.bg-gradient-light
.bg-gradient-white
.bg-gradient-dark
width-[options] Width in pixels .width-[1x-20x]
height-[options] Height in pixels .height-[1x-20x]
shadow-[options] Additional Box shadow classes .shadow-3d
.shadow-xl
hover-shadow-[options] On element hover shadow classes .hover-shadow
.hover-shadow-sm
.hover-shadow-lg
.hover-shadow-3d
hover-lift On hover move-up element .hover-lift
.hover-lift-lg
rounded-[options] Additional border-radius classes .rounded-blob
.rounded-block
border-dashed Convert border style to dashed .border-dashed
bg- Background image positions .bg-cover
.bg-contain
.bg-100
.bg-no-repeat
.bg-center
.bg-cover
flip- Flip an element .flip-x
.flip-y