Utilities

Utility classes to quickly style your elements.

Spacing

Assign responsive-friendly margin or padding values with shorthand classes.

Padding 3 (.p-3)
Margin 3 (.m-3)
<div class="p-3">Padding 3</div>
<div class="m-3">Margin 3</div>
<div class="mt-4">Margin top 4</div>
<div class="px-5">Padding horizontal 5</div>

Display

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

Flexbox

Item 1
Item 2
Item 3
<div class="d-flex justify-content-between">
    <div>Item 1</div>
    <div>Item 2</div>
</div>

Shadows

Small shadow
Regular shadow
Large shadow
<div class="shadow-sm">Small shadow</div>
<div class="shadow">Regular shadow</div>
<div class="shadow-lg">Large shadow</div>