Home » FAQs » Bootstrap Interview Questions » All Bootstrap Interview Questions » How do you center content in Bootstrap?

How do you center content in Bootstrap? 

<div class="d-flex justify-content-center align-items-center bg-body-tertiary border" style="height: 140px">
  <div class="p-3 bg-primary text-white rounded">Centered both ways</div>
</div>
Live preview

  • Horizontal text: .text-center.
  • A block with a width: .mx-auto.
  • Both directions: .d-flex .justify-content-center .align-items-center on the parent with a height.

See Flex Utilities.

Share this post:

Share on LinkedIn
Learn more about the similar topics:
Tutorials
No Content Found.
Exercises & Assignments
No Content Found.
Interview Questions & Answers
No Content Found.