#1. If you're trying to center a button in a form, you can do it easily by placing a parent div to the button with class text-center.
<div class="text-center">
<button type="button" class="btn btn-primary px-3">Subscribe me to the Newsletter</button>
</div>
Works. But that's one extra DOM element (parent DIV to the button) to required.
#2. What if you want to place the button to the right of the form ?
One way is the add the classfloat-end to the button.
<button type="button" class="btn btn-primary px-3 float-end">Subscribe me to the Newsletter</button>
<div class="clearfix"></div>
Works. But with this we need to add a clearfix. That's again, an extra DOM element. Moreover, less floats, the better.
#3. The default btn class in bootstrap is of display: inline-block; for which ms-auto (margin-left:auto) and me-auto (margin-right:auto) have no effect. So, if we change the display to block, then can use mx-auto and ms-auto.
<button type="button" class="btn btn-primary px-3 d-block ms-auto">Subscribe me to the Newsletter</button>
<div class="container mt-5">
<form>
<div class="mb-3">
<label for="exampleFormControlInput1" class="form-label">Enter your email address</label>
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
</div>
<div class="text-center">
<button type="button" class="btn btn-primary px-3">Subscribe me to the Newsletter</button>
</div>
<button type="button" class="btn btn-primary px-3 float-end">Subscribe me to the Newsletter</button>
<div class="clearfix"></div>
<button type="button" class="btn btn-primary px-3 d-block float-end ms-auto">Subscribe me to the Newsletter</button>
</form>
</div>
