Bootstrap 4, Bagaimana cara meratakan tengah tombol?

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

Tidak tahu cara menengahkan tombol ini. Di BS 3 saya hanya akan menggunakan blok tengah tapi itu bukan pilihan di BS4. Ada saran?

Dalam Bootstrap 4 seseorang harus menggunakan text-centerkelas untuk menyelaraskan blok-inline .

CATATAN: text-align:center;ditentukan di kelas kustom yang Anda terapkan ke elemen induk Anda akan berfungsi terlepas dari versi Bootstrap yang Anda gunakan. Dan itulah yang .text-centerberlaku.

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

Jika konten yang akan dipusatkan adalah block atau flex (not inline-), seseorang dapat menggunakan flexbox untuk memusatkannya:

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

... yang berlaku display: flex; justify-content: centeruntuk orang tua.

Catatan: jangan gunakan .row.justify-content-centersebagai ganti .d-flex.justify-content-center, karena .rowmargin negatif berlaku pada interval respons tertentu, yang menghasilkan scrollbar horizontal yang tidak terduga (kecuali .rowmerupakan turunan langsung dari .container, yang menerapkan bantalan lateral untuk melawan margin negatif, pada interval respons yang benar). Jika Anda harus menggunakan .row, karena alasan apa pun, timpa margin dan paddingnya dengan .m-0.p-0, dalam hal ini Anda akan mendapatkan gaya yang hampir sama seperti .d-flex.

Catatan penting: Solusi kedua bermasalah ketika konten yang di tengah (tombol) melebihi lebar induk ( .d-flex) terutama ketika induk memiliki lebar viewport, khususnya karena tidak memungkinkan untuk menggulir secara horizontal ke awal konten (kiri- paling).
Jadi jangan gunakan jika konten yang akan dipusatkan bisa menjadi lebih lebar dari lebar induk yang tersedia dan semua konten harus dapat diakses.

Coba ini dengan bootstrap

KODE:

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

TAUTAN:

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

Berikut adalah HTML lengkap yang saya gunakan untuk memusatkan dengan tombol dalam bentuk Bootsrap setelah menutup form-group:

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

Dengan penggunaan utilitas bootstrap 4, Anda dapat secara horizontal memusatkan elemen itu sendiri dengan mengatur margin horizontal ke 'auto'.

Untuk mengatur margin horizontal menjadi otomatis dapat Anda gunakan mx-auto. The mmengacu pada margin dan xakan mengacu pada sumbu x (kiri + kanan) dan autoakan mengacu pada pengaturan. Jadi ini akan mengatur margin kiri dan margin kanan ke pengaturan 'otomatis'. Browser akan menghitung margin secara merata dan memusatkan elemen. Pengaturan hanya akan bekerja pada elemen blok jadi tampilan: blok perlu ditambahkan dan dengan utilitas bootstrap ini dilakukan d-block.

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

Anda dapat mempertimbangkan semua browser untuk sepenuhnya mendukung pengaturan margin otomatis sesuai dengan jawaban ini Dukungan browser untuk margin: otomatis jadi aman digunakan.

Kelas bootstrap 4 text-centerjuga merupakan solusi yang sangat bagus, namun ia membutuhkan elemen pembungkus induk. Manfaat menggunakan margin otomatis adalah dapat dilakukan langsung pada elemen tombol itu sendiri.

Gunakan text-centerkelas dalam wadah induk untuk Bootstrap 4

Yang berhasil untuk saya adalah (sesuaikan "css / style.css" ke jalur css Anda):

Kepala HTML:

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

HTML Tubuh:

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

untuk tombol di bilah navigasi yang runtuh, tidak ada yang berfungsi di atas untuk saya, jadi di file css saya, saya melakukannya .....

.navbar button {
    margin:auto;
}

dan itu berhasil !!

Anda juga bisa membungkus dengan kelas H atau kelas P dengan atribut pusat teks