Bootstrap Utilities

Overview

Utilities are helper classes for common CSS properties like spacing, colors, display, and positioning.

Spacing

<!-- Margin -->
<div class="m-3">All sides margin</div>
<div class="mt-3">Top margin</div>
<div class="mb-3">Bottom margin</div>
<div class="ms-3">Start margin</div>
<div class="me-3">End margin</div>
<div class="mx-3">Horizontal margin</div>
<div class="my-3">Vertical margin</div>

<!-- Padding -->
<div class="p-3">All sides padding</div>
<div class="pt-3">Top padding</div>
<div class="pb-3">Bottom padding</div>

Colors

<!-- Text colors -->
<p class="text-primary">Primary text</p>
<p class="text-success">Success text</p>
<p class="text-danger">Danger text</p>

<!-- Background colors -->
<div class="bg-primary text-white">Primary background</div>
<div class="bg-success text-white">Success background</div>

Display

<div class="d-none">Hidden</div>
<div class="d-block">Block</div>
<div class="d-inline">Inline</div>
<div class="d-flex">Flex</div>
<div class="d-grid">Grid</div>

Next Steps

Next: Bootstrap Flex →