HTML

bootstrap flex class

.d-flex
.flex-row
.flex-row-reverse
.flex-column
.flex-column-reverse
.justify-content-start
.justify-content-end
.justify-content-center
.justify-content-between
.justify-content-around
.align-items-start
.align-items-end
.align-items-center
.align-items-baseline
.align-items-stretch

align-self: flex-end; bootsrap

align-self-end

align-self: flex-start; bootstrap

<div class="align-self-start">Aligned flex item</div>

<!-- responsive variations -->
<div class="align-self-sm-start">Aligned flex item</div>
<div class="align-self-md-start">Aligned flex item</div>
<div class="align-self-lg-start">Aligned flex item</div>
<div class="align-self-xl-start">Aligned flex item</div>Copy code

flex wrap bootstrap

<div class="d-flex flex-wrap">...</div>

bootstrap flex grid

<div class="d-flex justify-content-center"></div>

Bootstrap 4 Flex

<div class="d-flex p-3 bg-secondary text-white">
  <div class="p-2 bg-info">Flex item 1</div>
  <div class="p-2 bg-warning">Flex item 2</div>
  <div class="p-2 bg-primary">Flex item 3</div>
</div>

Bootstrap flex box

<div class="d-flex">
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
</div>

<div class="d-flex">
  <div class="mr-auto p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
</div>

<div class="d-flex">
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="ml-auto p-2">Flex item</div>
</div>

bootstrap display flex

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