MDBootstrap flexbox generator

Flex item 1

Flex item 2

Flex item 3

<div class="h-100 d-flex justify-content-center align-items-center">
  <h3 class="badge bg-primary">Flex item 1</h3>
  <h3 class="badge bg-primary">Flex item 2</h3>
  <h3 class="badge bg-primary">Flex item 3</h3>
</div>

How to use it?

1. Download MDB 5 - free UI KIT

2. Create a flexbox with the desired settings

3. Copy the generated code and paste it into the MDB project

Docs

Enable flex behaviors

d-flex

Direction

None

Justify content

justify-content-center

Align items

align-items-center

Align self(affects only Item 1)

None

Auto margins(affects only Item 1)

None