Preview Download

Flex Layouts

The Qoduby template basically uses Bootstrap Flex classes. Below you can find usage examples of these classes.

You can also check out the Bootstrap documentation for more information: https://getbootstrap.com/docs/5.3/utilities/flex/

Enable flex behaviors

										
<div class="d-flex p-2">I'm a flexbox container!</div>

I'm a flexbox container!

										
<div class="d-inline-flex p-2">I'm an inline flexbox container!</div>

I'm an inline flexbox container!

Direction

										
<div class="d-flex flex-row mb-3">
  <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">
  <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>

Flex item 1

Flex item 2

Flex item 3

Flex item 1

Flex item 2

Flex item 3

										
<div class="d-flex flex-column mb-3">
  <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-column-reverse">
  <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>

Flex item 1

Flex item 2

Flex item 3

Flex item 1

Flex item 2

Flex item 3

Justify Content

										
<div class="d-flex justify-content-start">...</div>
<div class="d-flex justify-content-end">...</div>
<div class="d-flex justify-content-center">...</div>
<div class="d-flex justify-content-between">...</div>
<div class="d-flex justify-content-around">...</div>
<div class="d-flex justify-content-evenly">...</div>

Justify

Content

Start

Justify

Content

End

Justify

Content

Center

Justify

Content

Between

Justify

Content

Around

Justify

Content

Evenly

Align Items

										
<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>

Flex item