Aligner la forme au centre dans Bootstrap 4

j'essaie d'aligner la forme au centre et de la garder réactive. 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 si 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="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%;

}

13
demandé sur Zim 2017-06-06 15:00:27

3 réponses

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

  • Utiliser text-center pour les éléments en ligne.
  • Utiliser justify-content-center pour les éléments flexbox (i.e.;form-inline)

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

aussi, pour décaler la colonne, le col-sm-* doit être contenu dans un .row et .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="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>
30
répondu Zim 2017-09-22 14:42:53 
<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>
6
répondu Surendher Raja 2018-04-11 17:44:18

toutes les réponses ci-dessus donnent parfaitement la solution pour centrer la forme en utilisant Bootstrap 4. Cependant, si quelqu'un veut utiliser de la boîte Bootstrap 4 CSS classes sans l'aide de tous les styles supplémentaires et aussi vouloir utiliser flex, on peut faire comme ceci.

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 CodePen

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

j'espère que cela aide quelqu'un. Remercier.

0
répondu Anjana Silva 2018-10-03 13:44:05