Utilities

Utilities

Utilities are small classes for common styles like spacing, borders, shadows, and sizing. They let you style elements without writing custom CSS.

Spacing

Spacing utilities control margin (m-) and padding (p-) on all sides or a single side.

The number at the end goes from 0 to 5. For example, p-5 is large padding, m-0 is no margin.

<div class="mt-4 p-5 bg-primary text-white">Spaced box</div>

Borders

• .border adds a border.
• .border-top, .border-bottom, .border-start, .border-end add one side.
• .border-0 removes borders.
• .rounded rounds corners; .rounded-circle makes a circle.

<div class="border border-primary p-3">Bordered box</div>

Shadows

• .shadow a normal shadow.
• .shadow-sm a small shadow.
• .shadow-lg a large shadow.
• .shadow-none no shadow.

<div class="shadow-lg p-3 mb-5 bg-white rounded">Large shadow</div>

Sizing

• .w-25, .w-50, .w-75, .w-100 set width.
• .h-25, .h-50, .h-75, .h-100 set height.
• .mw-100 sets max-width to 100%.

<div class="w-50 bg-success text-white">50% wide</div>

Display

• .d-block display block.
• .d-inline display inline.
• .d-flex display flex.
• .d-none hides the element.
• .d-md-block display changes at the md breakpoint.

TL;DR

• m- / p- control margin and padding.
• .border and .rounded handle borders and corners.
• .shadow* adds shadows.
• .w- and .h- set sizing.
• .d-* controls display.