To make a resposive layout there are dozens of bootstrap classes. Flex is one of them to manage the alignment, sizing of grid columns navigations etc. Hope you will enjoy this tutorial.
Basic example Flexbox
In this example bootstrap class d-flex is used make a responsive box.
<div class="d-flex p-3 border bg-dark text-white">
This is a flex box.
</div>
Output of above code
This is a flex box.
Inline Flexbox
In this example booststrap class d-inline-flex is used to make an
inline flexbox.
<divclass="d-inline-flex p-3 border bg-dark text-white">This is a inline flex box.</div>
Output of above code
This is a inline flex box.
The d-flex classes
A list of d-flex classes is given.
1. d-flex
2. d-inline-flex
3. d-sm-flex
4. d-sm-inline-flex
5. d-md-flex
6. d-md-inline-flex
7. d-lg-flex
Vertical Direction
In this example bootstrap class flex-coloumn is used to make
vertical list of flexbox. While flex-column-reverse is used to
make a reverse order flexbox list.
<divclass="d-flex flex-column mb-3"><divclass="p-2 bg-primary">Flex Box 1</div><divclass="p-2 bg-warning">Flex Box 2</div><divclass="p-2 bg-danger">Flex Box 3</div></div><divclass="d-flex flex-column-reverse"><divclass="p-2 bg-primary">Flex Box 1</div><divclass="p-2 bg-warning">Flex Box 2</div><divclass="p-2 bg-danger">Flex Box 3</div></div>
Output of above code
Flex Box 1
Flex Box 2
Flex Box 3
Flex Box 1
Flex Box 2
Flex Box 3
Horizontal Direction
In this example bootstrap class flex-row is used to make a
horizontal list of flexbox. While flex-row-reverse is used
to make reverse order list of flexbox.
<divclass="d-flex flex-row bg-secondary mb-3"><divclass="p-2 bg-primary">Flex Box 1</div><divclass="p-2 bg-warning">Flex Box 2</div><divclass="p-2 bg-danger">Flex Box 3</div></div><divclass="d-flex flex-row-reverse bg-secondary"><divclass="p-2 bg-primary">Flex Box 1</div><divclass="p-2 bg-warning">Flex Box 2</div><divclass="p-2 bg-danger">Flex Box 3</div></div>
Output of above code
Flex Box 1
Flex Box 2
Flex Box 3
Flex Box 1
Flex Box 2
Flex Box 3
Full width
In this example flexboxs are with full width and their alignment are different
with different classes. For example bootstrap class justify-content-start
are used to align the content at the start of the flexbox.The justify-content-end
is used to align the content at the end of the flexbox. The justify-content-center
is used to align the content at the center of the flexbox. The justify-content-between
is used to align the content in between.
<divclass="d-flex justify-content-start bg-secondary mb-3"><divclass="p-2 bg-primary">Flex Box 1</div><divclass="p-2 bg-warning">Flex Box 2</div><divclass="p-2 bg-danger">Flex Box 3</div></div><divclass="d-flex justify-content-end bg-secondary mb-3"><divclass="p-2 bg-primary">Flex Box 1</div><divclass="p-2 bg-warning">Flex Box 2</div><divclass="p-2 bg-danger">Flex Box 3</div></div><divclass="d-flex justify-content-center bg-secondary mb-3"><divclass="p-2 bg-primary">Flex Box 1</div><divclass="p-2 bg-warning">Flex Box 2</div><divclass="p-2 bg-danger">Flex Box 3</div></div><divclass="d-flex justify-content-between bg-secondary mb-3"><divclass="p-2 bg-primary">Flex Box 1</div><divclass="p-2 bg-warning">Flex Box 2</div><divclass="p-2 bg-danger">Flex Box 3</div></div><divclass="d-flex justify-content-around bg-secondary mb-3"><divclass="p-2 bg-primary">Flex Box 1</div><divclass="p-2 bg-warning">Flex Box 2</div><divclass="p-2 bg-danger">Flex Box 3</div></div>
Output of above code
Flex Box 1
Flex Box 2
Flex Box 3
Flex Box 1
Flex Box 2
Flex Box 3
Flex Box 1
Flex Box 2
Flex Box 3
Flex Box 1
Flex Box 2
Flex Box 3
Flex Box 1
Flex Box 2
Flex Box 3
The Best
Comment here
If you have any query, if you want to know something about any of technical course related to computer science field, if you have any suggestion about relevant to uploaded content or if you anything wrong here (any mistake in content) than please contact us. Keep in mind, comment should be according to community guidelines.
