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>
</div>

Не можу зрозуміти, як відцентрувати цю кнопку. У BS 3 я б просто використовував центральний блок, але це не варіант у BS4. Будь-яка порада?

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

Якщо вміст, який потрібно відцентрувати, є блоковим або гнучким (не inline-), можна використати flexbox для центрування:

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

<div class="d-flex justify-content-center">
  <button class="btn btn-default">Centered button</button>
</div>

... що стосується display: flex; justify-content: centerбатьків.

Примітка: не використовуйте .row.justify-content-centerзамість .d-flex.justify-content-center, оскільки .rowзастосовує негативні поля на певних інтервалах реагування, що призводить до несподіваних горизонтальних смуг прокрутки (якщо .rowце не прямий дочірній елемент .container, який застосовує бічні відступи для протидії негативному полю, на правильних інтервалах відгуку). Якщо ви .rowз будь-якої причини повинні використовувати , перевизначте його поле та відступ .m-0.p-0, в цьому випадку ви отримаєте майже ті самі стилі, що і .d-flex.

Важливе зауваження: Друге рішення є проблематичним, коли відцентрований вміст (кнопка) перевищує ширину батьківського елемента ( .d-flex), особливо коли батьківський елемент має ширину області перегляду, особливо тому, що унеможливлює горизонтальне прокручування до початку вмісту (зліва більшість).
Тому не використовуйте його, коли вміст, який потрібно відцентрувати, може стати ширшим від доступної батьківської ширини, і весь вміст повинен бути доступним.

Спробуйте це за допомогою bootstrap

КОД:

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

ПОСИЛАННЯ:

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

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

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

За допомогою утиліт bootstrap 4 ви можете горизонтально центрувати сам елемент, встановивши горизонтальні поля на «auto».

Для встановлення горизонтальних полів на автоматичне ви можете використовувати mx-auto. Посилання mстосується поля, а символ xбуде стосуватися осі х (ліворуч + праворуч), а autoтакож посилання на налаштування. Отже, для лівого та правого полів буде встановлено параметр «auto». Браузери обчислюють поле порівну і центрують елемент. Налаштування буде працювати лише з елементами блоку, тому дисплей: блок потрібно додати, а з утилітами bootstrap це робить d-block.

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

Ви можете розглянути, що всі браузери повністю підтримують параметри автоматичного поля відповідно до цієї відповіді. Підтримка браузера для margin: auto, тому це безпечно використовувати.

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

Використовуйте text-centerклас у батьківському контейнері для Bootstrap 4

Що мені вдалося (адаптуйте "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
}

для кнопки на згорнутої панелі навігації у мене нічого вище не працювало, тому в моєму файлі css я зробив .....

.navbar button {
    margin:auto;
}

і це спрацювало !!

Ви також можете просто обернути класом H або P класом з атрибутом text-center