как центрировать кнопку внутри формы, используя bootstrap 4

Question

У меня есть следующая кнопка внутри формы: -

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

и следующая таблица стилей: -

 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;
    }

в настоящее время кнопка будет выровнена по левому краю следующим образом: -

введите описание изображения здесь

так как я могу разместить его в центре страницы, используя синтаксис bootstrap?

Answer 1

Если вы действительно используете Bootstrap 4, просто примените класс text-center в том div, где вы хотите быть централизованным.

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>

Answer 2

Я бы попробовал добавить эти две строки в ваш CSS для button.standard:

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

Это часто срабатывает для меня.

Answer 3

Используйте flexbox. Это лучший инструмент для создания любого дизайна и размещения элементов.

Добавьте d-flex justify-content-center к <div>, содержащему <button>.

Я добавил красную рамку, чтобы вы могли видеть результат.

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>

Answer 4

используйте left:50px, это добавит отступ с левой стороны, измените число настолько, насколько вам нужно, потому что text-align: center не будет работать в этом