# Aligning a Button in a Form

#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 class`float-end` to the button.

```html
<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](https://getbootstrap.com/docs/5.1/helpers/clearfix/). That's again, an extra DOM element. Moreover, less float*s*, 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>  
```