<div class="container my-4">

​

    <p class="font-weight-bold">To center the content horizontally add <code>.text-center</code> class to the parent element of the content.</p>

​

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

          target="_blank">Bootstrap Text Alignment Docs</a>.</p>

​

    <p><Strong>Note: </Strong>Grey border marks the parent element of the image.</p>

​

    <hr>

​

    <p><strong>Add <code>.text-center</code> class to the parent element of the content to center it

        horizontally.</strong></p>

​

    <div class="text-center border border-light p-5">

​

      <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(10).jpg" class="img-fluid mb-4" alt="">

​

      <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Recusandae laborum alias rem eius ipsum saepe dolores impedit vero dignissimos, aperiam tenetur iste odio deserunt ex eos nam quae minima modi.</p>

​

      <button type="button" class="btn btn-primary">Primary</button>

      <button type="button" class="btn btn-danger">Danger</button>

​

    </div>

​

  </div>