Bootstrap 4, hoe kan ik een knop uitlijnen?

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

Antwoord 2, Autoriteit 17%

Probeer dit met bootstrap

Code:

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

Link:

https://getbootstrap.com/docs/4.1/Layout / raster / # variabele breedte-inhoud

Antwoord 3, Autoriteit 15%

Met het gebruik van de Bootstrap 4-hulpprogramma’s kunt u horizontaal een element zelf centreren door de horizontale marges in te stellen op ‘Auto’.

Om de horizontale marges op auto in te stellen, kun je mx-autogebruiken. De mverwijst naar de marge en de xverwijst naar de x-as (links+rechts) en autoverwijst naar de instelling. Dit zal dus de linkermarge en de rechtermarge op de ‘auto’-instelling zetten. Browsers berekenen de marge gelijk en centreren het element. De instelling werkt alleen op blokelementen, dus het display:block moet worden toegevoegd en met de bootstrap-hulpprogramma’s wordt dit gedaan door d-block.

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

U kunt overwegen dat alle browsers de instellingen voor automatische marge volledig ondersteunen volgens dit antwoord Browserondersteuning voor marge : automatischdus veilig in gebruik.

De bootstrap 4-klasse text-centeris ook een zeer goede oplossing, maar heeft een bovenliggend wrapper-element nodig. Het voordeel van het gebruik van automatische marge is dat het direct op het knopelement zelf kan worden gedaan.

Antwoord 4, autoriteit 12%

Hier is de volledige HTML die ik gebruik om per knop te centreren in Bootsrap-vorm
na het sluiten van formuliergroep:

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

Antwoord 5, autoriteit 5%

Gebruik de klasse text-centerin de bovenliggende container voor Bootstrap 4

Antwoord 6

voor een knop in een samengevouwen navigatiebalk werkte niets hierboven voor mij
dus in mijn css-bestand deed ik dat…..

.navbar button {
    margin:auto;
}

en het werkte!!

Antwoord 7

Wat voor mij werkte was (pas “css/style.css” aan je css-pad aan):

Hoofd HTML:

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

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

Antwoord 8

je kunt ook gewoon afsluiten met een H-klasse of P-klasse met een text-center-attribuut

Antwoord 9

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

  ` <div class="text-center">
              <a href="./templatemo_558_klassy_cafe/index.html" class="btn btn- 
   outline-light me-5 ">Lavande Restaurant PH</a>`
             </div>