Aligner le formulaire pour le centre dans le Bootstrap 4

Je suis en train d'aligner le formulaire pour le centre et de le garder réactif. J'ai essayé plusieurs façons mais sans succès. Je suis en train de centre de tout le texte et la forme. Je suis en utilisant Bootstrap v4. Je ne suis pas sûr si cela aide.

Aligner le formulaire pour le centre dans le Bootstrap 4

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

}

InformationsquelleAutor EyedFox1 | 2017-06-06
  1. 48

    Vous devez utiliser les différents Bootstrap 4 centrage des méthodes...

    • Utilisation text-center pour les éléments en ligne.
    • Utilisation justify-content-center pour flexbox éléments (c'est à dire; form-inline)

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

    Aussi, pour compenser la colonne, la col-sm-* doivent être contenus dans une .row, et la .row doit être dans un contenant...

    <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>
    InformationsquelleAutor Zim
  2. 12
    <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>
    • Bien que ce bloc de code peut répondre à la question, il serait mieux si vous pouvez fournir une petite explication de pourquoi il le fait. Veuillez modifier votre réponse à inclure une telle description.
    InformationsquelleAutor SuRa
  3. 5

    Toutes les réponses ci-dessus, parfaitement donne la solution pour le centre de la forme à l'aide de Bootstrap 4. Cependant, si quelqu'un veut utiliser de la boîte Bootstrap 4 classes css sans l'aide de tout les styles et aussi pas vouloir utiliser flex, on peut faire comme ceci.

    Un exemple de formulaire

    Aligner le formulaire pour le centre dans le Bootstrap 4

    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 cela aide quelqu'un. Merci.

    InformationsquelleAutor Anjana Silva