Aligner le formulaire au centre dans Bootstrap 4

Question

J'essaye d'aligner la forme au centre et de la maintenir sensible. J'ai essayé plusieurs façons mais sans succès. J'essaie de centrer tout le texte et la forme. J'utilise Bootstrap v4. Je ne suis pas sûr que cela aide.

HTML:

<section id="cover"> 
    <div id="cover-caption"> 
     <div id="container"> 
      <div class="col-sm-10 col-sm offset-1"> 
       <h1 class="display-3">Welcome to Bootstrap 4</h1> 
       <div class="info-form"> 
       <form action="" class="form-inline"> 
        <div class="form-group"> 
         <label class="sr-only">Name</label> 
         <input type="text" class="form-control" placeholder="Jane Doe"> 
        </div> 
        <div class="form-group"> 
         <label class="sr-only">Email</label> 
         <input type="text" class="form-control" placeholder="jane.doe@example.com"> 
        </div> 
        <button type="submit" class="btn btn-success ">okay, go!</button> 
       </form> 
       </div> 
       <br> 

       <a href="#nav-main" class="btn btn-secondary-outline btn-sm" role="button">&darr;</a> 
      </div> 
     </div> 
    </div> 
</section> 

CSS:

html, 
body{ 
height: 100%; 
} 

#cover { 
    background: #222 url('../img/stars.jpg') center center no-repeat; 
    background-size: cover; 
    color: white; 
    height: 100%; 
    text-align: center; 
    display: flex; 
    align-items: center; 

}

#cover-caption { 
    width: 100%; 

}

Answer 1

Vous devez utiliser les différentes méthodes de centrage Bootstrap 4 ...

• Utilisez text-center pour les éléments en ligne.
• utilisation justify-content-center pour les éléments de ēno (c.-à-; form-inline)

https://www.codeply.com/go/Am5LvvjTxC

De plus, pour compenser la colonne, le col-sm-* doit être contenue dans un .row, et le .row doit être dans un récipient .. .

<section id="cover"> 
    <div id="cover-caption"> 
     <div id="container" class="container"> 
      <div class="row"> 
       <div class="col-sm-10 offset-sm-1 text-center"> 
        <h1 class="display-3">Welcome to Bootstrap 4</h1> 
        <div class="info-form"> 
         <form action="" class="form-inline justify-content-center"> 
          <div class="form-group"> 
           <label class="sr-only">Name</label> 
           <input type="text" class="form-control" placeholder="Jane Doe"> 
          </div> 
          <div class="form-group"> 
           <label class="sr-only">Email</label> 
           <input type="text" class="form-control" placeholder="jane.doe@example.com"> 
          </div> 
          <button type="submit" class="btn btn-success ">okay, go!</button> 
         </form> 
        </div> 
        <br> 

        <a href="#nav-main" class="btn btn-secondary-outline btn-sm" role="button">↓</a> 
       </div> 
      </div> 
     </div> 
    </div> 
</section>