Display Helpers
Control the display property of elements.
Default display
Item 1
Item 2
Item 3
Hidden element (won't be visible)
Hidden element (won't be visible)
Flex container
Item 1
Item 2
Item 3
<h3>Flex container</h3>
<div class="demo-box">
<div class="p-2">Item 1</div>
<div class="p-2">Item 2</div>
<div class="p-2">Item 3</div>
</div>
<h3 class="d-none">Hidden element (won't be visible)</h3>
<div class="demo-box d-none">Hidden element (won't be visible)</div>
<h3>Flex container</h3>
<div class="demo-box flex">
<div class="p-2">Item 1</div>
<div class="p-2">Item 2</div>
<div class="p-2">Item 3</div>
</div>Flex Utilities
Helper classes for flexbox layouts.
Flex Item 1
Flex Item 2
Flex Item 3
<div class="flex items-center justify-between">
<div>Flex Item 1</div>
<div>Flex Item 2</div>
<div>Flex Item 3</div>
</div>Text Alignment
Control text alignment with utility classes.
Centered text
Left aligned text
Right aligned text
<div class="text-center">Centered text</div>
<div class="text-left">Left aligned text</div>
<div class="text-right">Right aligned text</div>Float Utilities
Float elements to the left or right.
Float left
Float right
<div class="float-left">Float left</div>
<div class="float-right">Float right</div>Clearfix
Remove floats from an element.
Float left
Float right
<div class="clearfix">
<div class="float-left">Float left</div>
<div class="float-right">Float right</div>
</div>Responsive Visibility
Control element visibility at different breakpoints.
Hidden on small screens
Hidden on medium screens
Hidden on large screens
<div class="sm-hidden">Hidden on small screens</div>
<div class="md-hidden">Hidden on medium screens</div>
<div class="lg-hidden">Hidden on large screens</div>Quick Spacing Helpers
Common spacing utility classes for margin and padding.
Margin 1 (all sides)
Margin 3 (all sides)
Margin 3 (horizontal)
Margin 3 (vertical)
<div class="demo-box p-0">
<div class="demo-box m-1">Margin 1 (all sides)</div>
</div>
<div class="demo-box p-0">
<div class="demo-box m-3">Margin 3 (all sides)</div>
</div>
<div class="demo-box p-0">
<div class="demo-box mx-3">Margin 3 (horizontal)</div>
</div>
<div class="demo-box p-0">
<div class="demo-box my-3">Margin 3 (vertical)</div>
</div>
Common Helper Combinations
Frequently used combinations of helper classes.
One Flex Item
Another Flex Item
<div class="flex justify-between p-3">
<div>One Flex Item</div>
<div>Another Flex Item</div>
</div>Top Left
Top Right
Bottom Left
Bottom Right
<div class="position-relative" style="height: 15rem">
<div class="demo-box item-top-left m-3">Top Left</div>
<div class="demo-box item-top-right m-3">Top Right</div>
<div class="demo-box item-bottom-left m-3">Bottom Left</div>
<div class="demo-box item-bottom-right m-3">Bottom Right</div>
</div>Helper Classes Reference
Display
.d-{block|inline|inline-block|flex|inline-flex|grid|none}- Display property.d-table{-row|-cell|-caption|-header-group|-footer-group|-row-group|-column|-column-group}- Table display properties
Position
.position-{relative|absolute|fixed|sticky|static|unset}- Position property.item-{top|bottom}-{left|right}- Position shortcuts for absolute elements
Flex
.flex- Flex container.flex-{col|row}- Flex direction.flex-{wrap|nowrap}- Flex wrap.items-center- Align items center.justify-between- Justify content space-between.gap-{1|2|3}- Gap spacing
Text
.text-{left|right|center}- Text alignment
Float
.float-{left|right|none}- Float property.clearfix- Clear floats