Bootstrap Flexbox
Duration : 00:03:00
Flexbox:
Flexbox is a layout model in Bootstrap that allows you to create flexible and responsive layouts with ease. It provides a powerful way to distribute space and align content within a container.Example:
<div class="d-flex">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>
Horizontal Direction:
You can control the horizontal direction of flex items using classes like flex-row and flex-row-reverse.Example:
<div class="d-flex flex-row">
<!-- Items arranged in a row -->
</div>
Vertical Direction:
Use classes like flex-column and flex-column-reverse to control the vertical direction of flex items:Example:
<div class="d-flex flex-column">
<!-- Items arranged in a column -->
</div>
Justify Content:
Bootstrap provides classes like justify-content-start, justify-content-center, and justify-content-end to align items along the main axis.Example:
<div class="d-flex justify-content-center">
<!-- Items centered horizontally -->
</div>
Fill / Equal Widths:
You can make flex items fill the available space evenly using the flex-fill class.Example:
<div class="d-flex">
<div class="flex-fill">Item 1</div>
<div class="flex-fill">Item 2</div>
</div>
Grow:
Control the relative growth of flex items using classes like flex-grow-1.Example:
<div class="d-flex">
<div class="flex-grow-1">Item 1</div>
<div>Item 2</div>
</div> Order:
Change the order of flex items using the order class.Example:
<div class="d-flex">
<div class="order-2">Item 2</div>
<div class="order-1">Item 1</div>
</div> Auto Margins:
Apply automatic margins to flex items using ms-auto and me-auto classes:Example:
<div class="d-flex">
<div class="me-auto">Item 1</div>
<div class="ms-auto">Item 2</div>
</div>
Wrap:
Wrap flex items to a new row/column when they don't fit using flex-wrap classes:Example:
<div class="d-flex flex-wrap">
<!-- Items will wrap to the next line if necessary -->
</div>
Align Content, Align Items, Align Self:
These classes (align-content-*, align-items-*, and align-self-*) are used to control vertical alignment of flex items and their content, similar to how justify-content works for horizontal alignment.Example:
<div class="d-flex align-items-center">
<!-- Items vertically centered -->
</div>
Responsive Flex Classes:
Bootstrap provides responsive classes that allow you to adjust flex behavior based on screen size.Example:
<div class="d-flex d-md-none">
<!-- Flex layout on screens smaller than medium -->
</div> Still have some questions? Let's discuss.
CONTACT US