Kenhuang Academy
  • English

      • Bootstrap Flex

      Overview

      Flex utilities provide a complete set of flexbox layout tools.

      Basic Flex

      <div class="d-flex">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
</div>

      Direction

      <!-- Row (default) -->
<div class="d-flex flex-row">...</div>

<!-- Row reverse -->
<div class="d-flex flex-row-reverse">...</div>

<!-- Column -->
<div class="d-flex flex-column">...</div>

<!-- Column reverse -->
<div class="d-flex flex-column-reverse">...</div>

      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>

      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>

      Next Steps

      Next: Bootstrap Checks & Radios →