Bootstrap 4, ¿Cómo alineo al centro un botón?

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

No sé cómo centrar este botón. En BS 3, solo usaría el bloque central, pero esa no es una opción en BS4. ¿Algún consejo?

En Bootstrap 4, uno debería usar la text-centerclase para alinear bloques en línea .

NOTA: si se text-align:center;define en una clase personalizada que aplique a su elemento principal, funcionará independientemente de la versión de Bootstrap que esté utilizando. Y eso es exactamente lo que se .text-centeraplica.

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

Si el contenido a centrar es block o flex (no inline-), se podría usar flexbox para centrarlo:

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

... que se aplica display: flex; justify-content: centera los padres.

Nota: no use en .row.justify-content-centerlugar de .d-flex.justify-content-center, ya que .rowaplica márgenes negativos en ciertos intervalos de respuesta, lo que da como resultado barras de desplazamiento horizontales inesperadas (a menos que .rowsea ​​un hijo directo de .container, que aplica relleno lateral para contrarrestar el margen negativo, en los intervalos de respuesta correctos). Si debe usar .row, por cualquier razón, anule su margen y relleno .m-0.p-0, en cuyo caso terminará con prácticamente los mismos estilos que .d-flex.

Nota importante: la segunda solución es problemática cuando el contenido centrado (el botón) excede el ancho del padre ( .d-flex), especialmente cuando el padre tiene ancho de ventana gráfica, específicamente porque hace que sea imposible desplazarse horizontalmente hasta el inicio del contenido (izquierda- más).
Por lo tanto, no lo use cuando el contenido que se va a centrar podría ser más ancho que el ancho principal disponible y todo el contenido debería ser accesible.

Prueba esto con bootstrap

CÓDIGO:

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

ENLACE:

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

Aquí está el HTML completo que uso para centrar por botón en el formulario Bootsrap después de cerrar form-group:

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

Con el uso de las utilidades de bootstrap 4, podría centrar horizontalmente un elemento configurando los márgenes horizontales en 'auto'.

Para configurar los márgenes horizontales en automático, puede usar mx-auto. El se mrefiere al margen y el xse referirá al eje x (izquierda + derecha) y autose referirá al ajuste. Así que esto establecerá el margen izquierdo y el margen derecho en la configuración 'automática'. Los navegadores calcularán el margen por igual y centrarán el elemento. La configuración solo funcionará en elementos de bloque, por lo que se debe agregar el bloque display: block y con las utilidades de arranque se hace d-block.

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

Puede considerar que todos los navegadores son totalmente compatibles con la configuración de margen automático de acuerdo con esta respuesta Compatibilidad del navegador con margin: auto, por lo que es seguro de usar.

La clase bootstrap 4 text-centertambién es una muy buena solución, sin embargo, necesita un elemento contenedor padre. El beneficio de usar el margen automático es que se puede hacer directamente en el elemento del botón.

Use la text-centerclase en el contenedor principal para Bootstrap 4

Lo que funcionó para mí fue (adaptar "css / style.css" a su ruta css):

HTML principal:

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

HTML del cuerpo:

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

para un botón en una barra de navegación colapsada, nada de lo anterior funcionó para mí, así que en mi archivo css lo hice .....

.navbar button {
    margin:auto;
}

¡¡Y funcionó!!

también puede simplemente envolver con una clase H o clase P con un atributo de centro de texto