Bootstrap 5 Spacing Horizontal centering

Bootstrap 5 Spacing Horizontal centering is used to balance out the margin on both sides by using the mx-auto class and setting the width of the element. Bootstrap provides us with shorthand margin and padding helpers which are also responsive and they help us to easily design the appearance of our webpage. We can determine how much we want to add the margin or padding by adding a number from 0-5.

Bootstrap 5 Spacing Horizontal centering Class:

• mx-auto: This class sets the display to be in the block and it sets the margin to be equal on both sides of the element to make the element center aligned.

Syntax:

<div class="mx-auto" style="width: value;">
 <!-- Centered Elements --!>
</div>

Example 1: The code below demonstrates how we can use the mx-auto class and horizontally center an element:

Output:

👁 Bootstrap 5 Spacing Horizontal centering

Example 2: The code below demonstrates how we can use the mx-auto class and horizontally center a card group:

Output:

👁 Bootstrap 5 Spacing Horizontal centering

Reference: https://getbootstrap.com/docs/5.0/utilities/spacing/#horizontal-centering