how to center a button inside a form using bootstrap 4

Question

I have the following button inside a form:-

<form>
  <div class="form-group">
            <button type="submit" id="getmyestimate" disabled class="standard">
            Get My Estimate
            </button>
   </div>
</form>

and the following style sheet:-

 button.standard {
        /*position: absolute;*/
        height: 40px;
        border: none;
        color: #fff;
        background: #4d9b84;
        padding: 0 22px;
        cursor: pointer;
        border-radius: 30px;
        top: 5px;
        right: 5px;
        font-size: 13px;
        font-weight: 500;
    }

currently the button will be align to the left as follow:-

so how i can position it to the center of the page using bootstrap syntax?

the answer can be found in this thread! [Click Here](https://stackoverflow.com/questions/22578853/how-to-center-buttons-in-twitter-bootstrap-3#:~:text=14%20Answers&text=Wrap%20the%20Button%20in%20div%20with%20%22text%2Dcenter%22%20class.&text=All%20the%20class%20center%2Dblock,being%20the%20left%2Fright%20margins.) — Yad Hersh, Jul 11 '20 at 22:11
Add more HTML. With the current provided HTML its all seems to be good and working. — Always Helping, Jul 11 '20 at 22:24

score 1 · Answer 1 · answered Jul 11 '20 at 22:27

Use flexbox. This is the best tool to make any kind of design and to position elements.

Add d-flex justify-content-center to <div> that contains <button>.

I added red border so you can see the result.

DOCS: https://getbootstrap.com/docs/4.5/utilities/flex/

/*DEMO*/body{padding:3rem}.form-group{border:1px solid red}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">

<div class="form-group d-flex justify-content-center">
    <button type="submit" id="getmyestimate" disabled class="btn btn-primary">Get My Estimate</button>
</div>

score 1 · Accepted Answer · answered Jul 12 '20 at 00:36

If you're in fact using Bootstrap 4, just apply the class text-center in the div where you want to be centralized.

button.standard {
height: 40px;
border: none;
color: #fff;
background: #4d9b84;
padding: 0 22px;
cursor: pointer;
border-radius: 30px;
top: 5px;
right: 5px;
font-size: 13px;
font-weight: 500;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<form>
<div class="form-group text-center">
<button type="submit" id="getmyestimate" disabled class="standard">
Get My Estimate
</button>
</div>
</form>

score 0 · Answer 3 · answered Jul 11 '20 at 22:09

0

use left:50px, this will add an indent from the left side, change the number as much as you need to, cause text-align: center will not work in this

answered Jul 11 '20 at 22:09

i do not want to specify px values,, is there a way to tell the browse to just align it to the center? – John John Jul 11 '20 at 22:11
you could use `%` and `rem` – Jul 11 '20 at 22:14
also you can use the `padding:(number here)` attribute – Jul 11 '20 at 22:16
@testtest Did this fix your problem? – Jul 12 '20 at 18:12

score 0 · Answer 4 · answered Jul 11 '20 at 22:09

0

I would try adding these two lines to your CSS for button.standard:

margin-left:auto;
margin-right:auto;

This often works for me.

answered Jul 11 '20 at 22:09

Richard Baldwin

33
8

your css rules did not have any effect – John John Jul 11 '20 at 22:12

how to center a button inside a form using bootstrap 4

4 Answers4