Bootstrap Center Div Horizontally — How to Center a Div with Bootstrap
Bootstrap Center Div Horizontally is super easy with margin utilities. Here’s how to center a div in Bootstrap with one class.
How to Bootstrap Center Div Horizontally
</p>
<div class=”mx-auto” style=”width: 200px;”> I am centered horizontally! </div> How Bootstrap Center Div Horizontally Works
Bootstrap’s mx-auto sets left and right margins to auto, pushing the div to the center.
Why Use Bootstrap Center Div Horizontally
Bootstrap Center Div Horizontally saves you from writing custom CSS for common alignments.
Common Mistake in Bootstrap Center Div Horizontally
Don’t forget to set a width — mx-auto won’t work properly without it.
Pro Tip for Bootstrap Center Div Horizontally
Combine mx-auto with text-center to center inline content as well.