Bootstrap 6 utility API

Every utility class Bootstrap ships is generated from one Sass map, $utilities. Each entry describes a family of classes — the property it sets, the values it accepts, and which variants to generate. Customizing utilities means editing that map, not writing CSS.

Workflow

• Step 1: Understand how generation works
• Step 2: Read a utility definition
• Step 3: Add a utility
• Step 4: Modify, rename, or remove a default utility
• Step 5: Generate responsive, state, print, and dark variants
• Step 6: Compose values with custom properties and advanced selectors
• Step 7: Trim the generated CSS
• Step 8: Add a utility to Bootstrap itself
• Step 9: Verify

Step 1: Understand how generation works