Bootstrap 4 FlexUse flex classes to control the layout of Bootstrap 4 components. Show FlexboxThe biggest difference between Bootstrap 3 and Bootstrap 4 is that Bootstrap 4 now uses flexbox, instead of floats, to handle the layout. The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure without using float or positioning. If you are new to flex, you can read about it in our CSS Flexbox Tutorial. Note: Flexbox is not supported in IE9 and earlier versions. If you require IE8-9 support, use Bootstrap 3. It is the most stable version of Bootstrap, and it is still supported by the team for critical bugfixes and documentation changes. However, no new features will be added to it. To create a flexbox container and to transform direct children into flex items, use the ExampleFlex item 1 Flex item 2 Flex item 3 Example<div class="d-flex p-3 bg-secondary text-white"> Try it Yourself » To create an inline flexbox container, use the ExampleFlex item 1 Flex item 2 Flex item 3 Example<div class="d-inline-flex p-3 bg-secondary text-white"> Try it Yourself » Horizontal DirectionUse Tip: Use ExampleFlex item 1 Flex item 2 Flex item 3 Flex item 1 Flex item 2 Flex item 3 Example<div class="d-flex flex-row bg-secondary"> <div class="d-flex flex-row-reverse bg-secondary"> Try it Yourself » Vertical DirectionUse ExampleFlex item 1 Flex item 2 Flex item 3 Flex item 1 Flex item 2 Flex item 3 Example<div class="d-flex flex-column"> <div class="d-flex flex-column-reverse"> Try it Yourself » Justify ContentUse the ExampleFlex item 1 Flex item 2 Flex item 3 Flex item 1 Flex item 2 Flex item 3 Flex item 1 Flex item 2 Flex item 3 Flex item 1 Flex item 2 Flex item 3 Flex item 1 Flex item 2 Flex item 3 Example<div class="d-flex justify-content-start">...</div> Try it Yourself » Fill / Equal WidthsUse ExampleFlex item 1 Flex item 2 Flex item 3 Example<div class="d-flex"> Try it Yourself » GrowUse ExampleFlex item 1 Flex item 2 Flex item 3 Example<div class="d-flex"> Try it Yourself » Tip: Use OrderChange the visual
order of a specific flex item(s) with the ExampleFlex item 1 Flex item 2 Flex item 3 Example<div class="d-flex bg-secondary"> Try it Yourself » Auto MarginsEasily add auto margins to flex items with ExampleFlex item 1 Flex item 2 Flex item 3 Flex item 1 Flex item 2 Flex item 3 Example<div class="d-flex bg-secondary"> <div class="d-flex bg-secondary"> Try it Yourself » WrapControl how flex items wrap in a flex container with Click on the buttons below to see the difference between the three classes, by changing the wrapping of the flex items in the example box: ExampleFlex item 1 Flex item 2 Flex item 3 Flex item 4 Flex item 5 Flex item 6 Flex item 7 Flex item 8 Flex item 9 Flex item 10 Flex item 11 Flex item 12 Flex item 13 Flex item 14 Flex item 15 Flex item 16 Flex item 17 Flex item 18 Flex item 19 Flex item 20 Flex item 21 Flex item 22 Flex item 23 Flex item 24 Flex item 25 Example<div class="d-flex flex-wrap">..</div> <div class="d-flex flex-wrap-reverse">..</div> <div class="d-flex flex-nowrap">..</div> Try it Yourself » Align ContentControl the vertical alignment of
gathered flex items with the Note: These classes have no effect on single rows of flex items. Click on the buttons below to see the difference between the five classes, by changing the vertical alignment of the flex items in the example box: ExampleFlex item 1 Flex item 2 Flex item 3 Flex item 4 Flex item 5 Flex item 6 Flex item 7 Flex item 8 Flex item 9 Flex item 10 Flex item 11 Flex item 12 Flex item 13 Flex item 14 Flex item 15 Flex item 16 Flex item 17 Flex item 18 Flex item 19 Flex item 20 Flex item 21 Flex item 22 Flex item 23 Flex item 24 Flex item 25 Example<div class="d-flex flex-wrap align-content-start">..</div> <div class="d-flex flex-wrap align-content-end">..</div> <div class="d-flex flex-wrap align-content-center">..</div> <div class="d-flex flex-wrap align-content-around">..</div> <div class="d-flex flex-wrap align-content-stretch">..</div> Try it Yourself » Align ItemsControl the vertical alignment of single rows of flex items with the Click on the buttons below to see the difference between the five classes: ExampleFlex item 1 Flex item 2 Flex item 3 Example<div class="d-flex align-items-start">..</div> <div class="d-flex align-items-end">..</div> <div class="d-flex align-items-center">..</div> <div class="d-flex align-items-baseline">..</div> <div class="d-flex align-items-stretch">..</div> Try it Yourself » Align SelfControl the vertical alignment of a specified flex item with
the Click on the buttons below to see the difference between the five classes: ExampleFlex item 1 Flex item 2 Flex item 3 Example<div class="d-flex bg-light" style="height:150px"> Try it Yourself » Responsive Flex ClassesAll flex classes comes with additional responsive classes, which makes it easy to set a specific flex class on a specific screen size. The
|