Bootstrap 4, как мне выровнять кнопку по центру?

<div class="container">
        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-8">
                <div v-for="job in job">


                    <div class="text-center">
                        <h1>{{ job.job_title }}</h1>
                        <p><strong>Google Inc. </strong> - {{ job.location }}</p>
                        <h2><u>Job Description</u></h2>
                    </div>

                    <p v-html="desc"></p>

                    <p class="text-center">Posted: {{ formatDate(job.date_created) }}</p>
                    <button v-on:click="applyResume()" id="apply-btn" class="btn btn-primary">{{ buttonText }}</button>

                </div>

            </div>
            <div class="hidden-sm-down col-md-4"></div>


        </div>

Невозможно определить, как центрировать эту кнопку. В BS 3 я бы просто использовал центральный блок, но это не вариант в BS4. Любые советы?

Ответ 1

В Bootstrap 4 вы должны использовать класс text-center для выравнивания встроенных блоков.

ПРИМЕЧАНИЕ: text-align:center;, определенный в пользовательском классе, который вы применяете к родительскому элементу, будет работать независимо от используемой вами версии Bootstrap. И это именно то, что применимо к .text-center.

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

<div class="container">
  <div class="row">
    <div class="col text-center">
      <button class="btn btn-default">Centered button</button>
    </div>
  </div>
</div>

Ответ 2

Вот полный HTML-код, который я использую для центрирования по кнопке в форме Bootsrap после закрытия формы-группы:

<div class="form-row text-center">
    <div class="col-12">
        <button type="submit" class="btn btn-primary">Submit</button>
    </div>
 </div>

Ответ 3

Попробуйте это с помощью начальной загрузки

КОД:

<div class="row justify-content-center">
  <button type="submit" class="btn btn-primary">btnText</button>
</div>

LINK:

https://getbootstrap.com/docs/4.1/layout/grid/#variable-width-content

Ответ 4

Используйте класс text-center в родительском контейнере для Bootstrap 4

Ответ 5

С помощью утилит bootstrap 4 вы можете горизонтально центрировать сам элемент, устанавливая горизонтальные поля в 'auto'.

Для автоматической установки горизонтальных полей можно использовать mx-auto. m относится к марже, а x относится к оси x (влево + вправо), а auto относится к настройке. Таким образом, для левого и правого полей будет установлено значение "Авто". Браузеры рассчитывают маржу одинаково и центрируют элемент. Настройка будет работать только с элементами блока, поэтому необходимо добавить блок display: и с помощью утилит начальной загрузки это делается с помощью d-block.

<button type="submit" class="btn btn-primary mx-auto d-block">Submit</button>

В соответствии с этим ответом можно считать, что все браузеры полностью поддерживают автоматические настройки полей . Поддержка браузерами полей: auto, поэтому его можно использовать безопасно.

Класс начальной загрузки text-center также является очень хорошим решением, однако для него требуется родительский элемент-обертка. Преимущество использования автоматической маржи заключается в том, что это можно сделать непосредственно на самом элементе кнопки.

Ответ 6

Что сработало для меня (адаптируйте "css/style.css" к вашему пути css):

Голова HTML:

 <link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />

Тело HTML:

 <div class="container">
  <div class="row">
    <div class="mycentered-text">
      <button class="btn btn-default"> Login </button>
    </div>
  </div>
</div>

Css:

.mycentered-text {
    text-align:center
}