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
|