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 m-2">Item 1</div>
<div class="p-2 m-2">Item 2</div>
<div class="p-2 m-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 d-flex">
<div class="p-2 m-2">Item 1</div>
<div class="p-2 m-2">Item 2</div>
<div class="p-2 m-2">Item 3</div>
</div>Flex Utilities
Helper classes for flexbox layouts.
Flex Item 1
Flex Item 2
Flex Item 3
<div class="d-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>
Flex Direction Utilities
Control the direction of flex items.
Item 1
Item 2
Item 3
Item 1
Item 2
Item 3
Item 1
Item 2
Item 3
Item 1
Item 2
Item 3
<div class="d-flex flex-row">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>
<div class="d-flex flex-row-reverse">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>
<div class="d-flex flex-col">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>
<div class="d-flex flex-col-reverse">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>Flex Wrap Utilities
Control the wrapping of flex items.
Item 1
Item 2
Item 3
Item 1
Item 2
Item 3
Item 1
Item 2
Item 3
<div class="d-flex flex-wrap">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>
<div class="d-flex flex-nowrap">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>
<div class="d-flex flex-wrap-reverse">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>Flex Grow and Shrink Utilities
Control the growth and shrinkage of flex items.
Item 1
Item 2
Item 3
<div class="flex">
<div class="flex-grow-0">Item 1</div>
<div class="flex-grow-1">Item 2</div>
<div class="flex-shrink-0">Item 3</div>
</div>Flex Basis Utilities
Control the initial size of flex items.
Item 1
Item 2
Item 3
<div class="flex">
<div class="flex-basis-auto">Item 1</div>
<div class="flex-basis-25">Item 2</div>
<div class="flex-basis-50">Item 3</div>
</div>Flex Alignment Utilities
Control the alignment of flex items.
Item 1
Item 2
Item 3
Item 1
Item 2
Item 3
Item 1
Item 2
Item 3
Item 1
Item 2
Item 3
Item 1
Item 2
Item 3
<div class="d-flex items-start">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>
<div class="d-flex items-end">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>
<div class="d-flex items-center">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>
<div class="d-flex items-baseline">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>
<div class="d-flex items-stretch">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>Flex Order Utilities
Control the order of flex items.
Item 2
Item 1
Item 3
<div class="flex">
<div class="order-2">Item 2</div>
<div class="order-1">Item 1</div>
<div class="order-3">Item 3</div>
</div>Flex Gap Utilities
Control the gap between flex items.
Item 1
Item 2
Item 3
Item 1
Item 2
Item 3
<div class="d-flex gap-1">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>
<div class="d-flex gap-3">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</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
.d-flex- Flex container.flex-{row|row-reverse|column|column-reverse}- Flex direction.flex-{wrap|nowrap|wrap-reverse}- Flex wrap.items-{start|end|center|baseline|stretch}- Align items.self-{auto|start|end|center|baseline|stretch}- Align self.justify-{start|end|center|between|around|evenly}- Justify content.content-{start|end|center|between|around|stretch}- Align content.flex-{grow-0|grow-1|shrink-0|shrink-1}- Flex grow and shrink.flex-basis-{auto|0|25|50|75|100}- Flex basis.order-{1|2|3|last|first|none}- Order.gap-{0|1|2|3|4|5|6}- Gap spacing
Text
.text-{left|right|center}- Text alignment
Float
.float-{left|right|none}- Float property.clearfix- Clear floats