Flexbox in Bootstrap 4: From bootstrap 3 to bootstrap 4 amazing change has occurred that bootstrap 4 can utilize flexbox to handle the layout of content. The FlexBox Layout Module makes it easier to design a flexible responsive layout structure.
Approach: Place the direction of flex items in a flex container with direction utilities. In most cases, you will be able to exclude the horizontal class as the browser default is a row. In any case, you will experience circumstances where you required to explicitly set this esteem (like responsive layouts).
The following Examples represent different ways to put items underneath each other in a Flex-Box.
Example 1: Use .flex-column class to put items underneath each other.
<div class="d-flex flex-column"></div>
Example 2: You can also use the .flex-column-reverse class to put items underneath each other in reverse order. Displaying flex-box in reverse order.
Example 3: By using flex-direction: column; and align-items: center; you can place items underneath each other in the center. Thus, as shown below, we can place icons or images underneath each other using flexbox in bootstrap 4.
- How to put images in a box without space using Bootstrap?
- How to place two input box next to each other using Bootstrap 4 ?
- How to put two columns one below other in sidebar in Bootstrap ?
- CSS | Ordering Flex Items
- Bootstrap 4 | Flex
- How to place two bootstrap cards next to each other ?
- How to set hamburger items on the right in bootstrap 4 ?
- How to align navbar items to the right in Bootstrap 4 ?
- How to Align Navbar Items to Center using Bootstrap 4 ?
- How to remove items from a select box ?
- CSS | flex-wrap property
- CSS | flex-grow Property
- CSS | flex-shrink Property
- CSS | flex-flow Property
- CSS | flex-direction Property
- CSS | flex Property
- CSS | flex-basis Property
- HTML | DOM Style flex Property
- What is the difference between inline-flex and inline-block in CSS?
- What are the differences between flex-basis and width in Flexbox ?
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to email@example.com. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.