Media Object
Auto Margins
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
<div class="d-flex mb-3 bg-primary-transparent">
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
</div>
<div class="d-flex mb-3 bg-primary-transparent">
<div class="me-auto p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
</div>
<div class="d-flex bg-primary-transparent">
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="ms-auto p-2">Flex item</div>
</div>
Direction
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
<div class="d-flex flex-row mb-3 bg-primary-transparent">
<div class="p-2">Flex item 1</div>
<div class="p-2">Flex item 2</div>
<div class="p-2">Flex item 3</div>
</div>
<div class="d-flex flex-row-reverse bg-primary-transparent">
<div class="p-2">Flex item 1</div>
<div class="p-2">Flex item 2</div>
<div class="p-2">Flex item 3</div>
</div>
Justify content
Justify
Content
Start
Justify
Content
End
Justify
Content
Center
Justify
Content
Between
Justify
Content
Around
Justify
Content
Evenly
<div class="d-flex justify-content-start bg-primary-transparent mb-3">
<div class="p-2">Justify</div>
<div class="p-2">Content</div>
<div class="p-2">Start</div>
</div>
<div class="d-flex justify-content-end bg-primary-transparent mb-3">
<div class="p-2">Justify</div>
<div class="p-2">Content</div>
<div class="p-2">End</div>
</div>
<div class="d-flex justify-content-center bg-primary-transparent mb-3">
<div class="p-2">Justify</div>
<div class="p-2">Content</div>
<div class="p-2">Center</div>
</div>
<div class="d-flex justify-content-between bg-primary-transparent mb-3">
<div class="p-2">Justify</div>
<div class="p-2">Content</div>
<div class="p-2">Between</div>
</div>
<div class="d-flex justify-content-around bg-primary-transparent mb-3">
<div class="p-2">Justify</div>
<div class="p-2">Content</div>
<div class="p-2">Around</div>
</div>
<div class="d-flex justify-content-evenly bg-primary-transparent">
<div class="d-flex justify-content-around">
<div class="p-2">Justify</div>
<div class="p-2">Content</div>
<div class="p-2">Evenly</div>
</div>
</div>
Fill
Flex item with a lot of content
Flex item
Flex item
<div class="d-flex bg-primary-transparent">
<div class="p-2 flex-fill">Flex item with a lot of content</div>
<div class="p-2 flex-fill">Flex item</div>
<div class="p-2 flex-fill">Flex item</div>
</div>
Grow And Shrink
Flex item
Flex item
Third flex item
<div class="d-flex bg-primary-transparent">
<div class="p-2 flex-grow-1">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Third flex item</div>
</div>
Order
First flex item
Second flex item
Third flex item
<div class="d-flex flex-nowrap bg-primary-transparent">
<div class="order-3 p-2">First flex item</div>
<div class="order-2 p-2">Second flex item</div>
<div class="order-1 p-2">Third flex item</div>
</div>
Media Object
This is some content from a media component. You can replace this with any content and adjust it as needed.
<div class="d-flex">
<div class="flex-shrink-0">
<img src="assets/images/user/user-1.jpg" class="wh-100 rounded-2" alt="user-1">
</div>
<div class="flex-grow-1 ms-3 fs-14 text-body">
This is some content from a media component. You can replace this with any content and adjust it as needed.
</div>
</div>
Media Object Align
This is some content from a media component. You can replace this with any content and adjust it as needed.
<div class="d-flex align-items-center">
<div class="flex-shrink-0">
<img src="assets/images/user/user-2.jpg" class="wh-100 rounded-2" alt="user-2">
</div>
<div class="flex-grow-1 ms-3 fs-14 text-body">
This is some content from a media component. You can replace this with any content and adjust it as needed.
</div>
</div>