web-dev-qa-db-fra.com

Alignez le formulaire au centre dans Bootstrap 4

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

 As you can see that the fr is not aligned to the center

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="[email protected]">
                    </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%;

}

htmlcsstwitter-bootstrapbootstrap-4twitter-bootstrap-4
18
EyedFox1

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

  • Utilisez text-center pour les éléments en ligne.
  • Utilisez justify-content-center pour les éléments flexbox (c.-à-d. form-inline)

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

De plus, pour décaler la colonne, le col-sm-* doit être contenu dans un .row et le .row doit être dans un conteneur ...

<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="[email protected]">
                            </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>
40
Zim
<div class="d-flex justify-content-center align-items-center container ">

    <div class="row ">


        <form action="">
            <div class="form-group">
                <label for="inputUserName" class="control-label">Enter UserName</label>
                <input type="email" class="form-control" id="inputUserName" aria-labelledby="emailnotification">
                <small id="emailnotification" class="form-text text-muted">Enter Valid Email Id</small>
            </div>
            <div class="form-group">
                <label for="inputPassword" class="control-label">Enter Password</label>
                <input type="password" class="form-control" id="inputPassword" aria-labelledby="passwordnotification">

            </div>
        </form>

    </div>

</div>
7
SuRa

Toutes les réponses ci-dessus donnent parfaitement la solution pour centrer le formulaire en utilisant Bootstrap 4. Cependant, si quelqu'un souhaite utiliser les classes __ Bootstrap 4 css prêtes à l'emploi sans l'aide de styles supplémentaires et que not souhaite utiliser flex, nous pouvons procéder de la sorte.

Un exemple de formulaire

 enter image description here

HTML

<div class="container-fluid h-100 bg-light text-dark">
  <div class="row justify-content-center align-items-center">
    <h1>Form</h1>    
  </div>
  <hr/>
  <div class="row justify-content-center align-items-center h-100">
    <div class="col col-sm-6 col-md-6 col-lg-4 col-xl-3">
      <form action="">
        <div class="form-group">
          <select class="form-control">
                    <option>Option 1</option>
                    <option>Option 2</option>
                  </select>
        </div>
        <div class="form-group">
          <input type="text" class="form-control" />
        </div>
        <div class="form-group text-center">
          <div class="form-check-inline">
            <label class="form-check-label">
    <input type="radio" class="form-check-input" name="optradio">Option 1
  </label>
          </div>
          <div class="form-check-inline">
            <label class="form-check-label">
    <input type="radio" class="form-check-input" name="optradio">Option 2
  </label>
          </div>
          <div class="form-check-inline">
            <label class="form-check-label">
    <input type="radio" class="form-check-input" name="optradio" disabled>Option 3
  </label>
          </div>
        </div>
        <div class="form-group">
          <div class="container">
            <div class="row">
              <div class="col"><button class="col-6 btn btn-secondary btn-sm float-left">Reset</button></div>
              <div class="col"><button class="col-6 btn btn-primary btn-sm float-right">Submit</button></div>
            </div>
          </div>
        </div>

      </form>
    </div>
  </div>
</div>

Lien vers CodePen

https://codepen.io/anjanasilva/pen/WgLaGZ

J'espère que ça aidera quelqu'un. Je vous remercie.

1
Anjana Silva