CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbootstrap-4
John John
John John

Reputation: 1

how to center a button inside a form using bootstrap 4

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:-

enter image description here

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

Upvotes: 0

Views: 740

Answers (4)

Mathias
Mathias

Reputation: 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>

Upvotes: 1

Jakub Muda
Jakub Muda

Reputation: 6694

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>

Upvotes: 1

Richard Baldwin
Richard Baldwin

Reputation: 33

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

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

This often works for me.

Upvotes: 0

user13861136
user13861136

Reputation:

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

Upvotes: 0

Related Questions