Bootstrap 4, como alinhar um botão ao centro?

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

Não consigo descobrir como centralizar este botão. No BS 3, eu usaria apenas o bloco central, mas isso não é uma opção no BS4. Algum conselho?

No Bootstrap 4 deve-se usar a text-centerclasse para alinhar blocos embutidos .

NOTA: text-align:center;definido em uma classe personalizada que você aplica ao seu elemento pai, funcionará independentemente da versão do Bootstrap que você estiver usando. E é exatamente isso que .text-centerse aplica.

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

Se o conteúdo a ser centralizado for block ou flex (not inline-), pode-se usar o flexbox para centralizá-lo:

<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: center ao pai.

Observação: não use em .row.justify-content-centervez de .d-flex.justify-content-center, pois .rowaplica margens negativas em determinados intervalos de resposta, o que resulta em barras de rolagem horizontais inesperadas (a menos que .rowseja filho direto de.container , que aplica preenchimento lateral para neutralizar a margem negativa, nos intervalos de resposta corretos). Se você deve usar .row, por qualquer motivo, substitua sua margem e preenchimento com .m-0.p-0, nesse caso, você acabará com praticamente os mesmos estilos que.d-flex .

Observação importante: a segunda solução é problemática quando o conteúdo centralizado (o botão) excede a largura do pai ( .d-flex), especialmente quando o pai tem largura de janela de visualização, especificamente porque torna impossível rolar horizontalmente para o início do conteúdo (à esquerda a maioria).
Portanto, não o use quando o conteúdo a ser centralizado puder se tornar mais largo do que a largura pai disponível e todo o conteúdo estiver acessível.

Tente isso com bootstrap

CÓDIGO:

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

LIGAÇÃO:

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

Com o uso dos utilitários bootstrap 4, você pode centralizar horizontalmente um elemento em si, definindo as margens horizontais para 'auto'.

Para definir as margens horizontais como automáticas, você pode usar mx-auto. O mse refere à margem e o xse refere ao eixo x (esquerda + direita) e autose refere à configuração. Portanto, isso definirá a margem esquerda e a margem direita para a configuração 'automática'. Os navegadores calcularão a margem igualmente e centralizarão o elemento. A configuração só funcionará em elementos de bloco, portanto, o display: block precisa ser adicionado e com os utilitários de bootstrap isso é feito por d-block.

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

Você pode considerar que todos os navegadores suportam totalmente as configurações de margem automática de acordo com esta resposta Suporte do navegador para margem: automático portanto é seguro usar

A classe bootstrap 4 text-centertambém é uma solução muito boa, mas precisa de um elemento pai wrapper. A vantagem de usar a margem automática é que isso pode ser feito diretamente no próprio elemento do botão.

Aqui está o HTML completo que uso para centralizar por botão no formulário Bootsrap após fechar o grupo de formulários:

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

Use a text-centerclasse no contêiner pai para Bootstrap 4

O que funcionou para mim foi (adapte "css / style.css" ao seu caminho css):

HTML principal:

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

HTML do corpo:

 <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 um botão em uma barra de navegação recolhida, nada acima funcionou para mim, então no meu arquivo css eu fiz ...

.navbar button {
    margin:auto;
}

e funcionou !!

você também pode encerrar com uma classe H ou classe P com um atributo text-center