<div class="container my-4">

​

    <p class="font-weight-bold">Bootstrap flex grid is very helpful layout construction which extends the basic functionality of the bootstrap grid.</p>

​

    <p><strong>Detailed documentation and more examples you can find in our <a href="https://mdbootstrap.com/docs/jquery/utilities/flexbox/"

          target="_blank">Bootstrap Flexbox Docs</a> </p>

​

    <hr>

​

    <p class="font-weight-bold">Basic examples</p>

        <!--Grid row-->

    <div class="row d-flex justify-content-center border border-light my-4 py-4">

​

      <!--Grid column-->

      <div class="col-md-6 blue">

​

        <p class="text-white">This grid construction use flexbox to center the grid column <code>.col-md-10</code>.</p>

​

      </div>

      <!--Grid column-->

​

    </div>

    <!--Grid row-->

    <hr class="my-5">

​

    <!--Grid row-->

    <div class="row d-flex justify-content-center border border-light my-4 py-4">

​

      <!--Grid column-->

      <div class="col-md-10 teal">

​

        <p class="text-white">This grid construction use flexbox to center the grid column <code>.col-md-10</code> .</p>

​

      </div>

      <!--Grid column-->

​

    </div>

    <!--Grid row-->

​

  </div>