0
votes

Html: alignement du formulaire Bootstrap au centre

Je travaille actuellement sur un système de connexion simple et j'ai quelques difficultés Front-End. J'essaie de créer un formulaire de connexion basé sur le centre avec quelques entrées et un bouton. Donc, en gros, en ce moment, j'ai pu faire quelques entrées à l'intérieur du centre, mais quand j'ai essayé d'ajouter un bouton, j'ai obtenu un résultat comme celui-ci:

Remarque: j'ai besoin que le bouton soit au centre du formulaire. De plus, est-ce que je remplis correctement le formulaire au centre?

Mon code HTML:

<div class="container">
    <h1 class="page-header text-center apie_m_cga">~ Support Desk ~</h1>
    <hr>
    <div class="row justify-content-center">
        <div class="form-group col-md-3 col-md-offset-7 align-center ">
        <br>
        <input type="text" id="inputUsername6" placeholder="Username" class="form-control mx-sm-3 text-center">
        <br>
        <input type="password" id="inputPassword6" placeholder="Password" class="form-control mx-sm-3 text-center">
        <br>
        <button type="button" class="btn btn-primary btn-lg">Login</button>
        </div>
    </div>
    <br>
</div>

html css twitter-bootstrap forms

0 commentaires

5 Réponses :

0
votes

Je pense que la classe de votre bouton "btn-lg" est influencée en position. Fondamentalement, il n'y a pas d'erreurs spéciales sur votre script à part cela. Veuillez le supprimer en classe et réessayer

1 commentaires

hey "btn-lg" change juste la taille du bouton.

1
votes

Ajoutez simplement un text-align: center; à votre form-group

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container">
  <h1 class="page-header text-center apie_m_cga">~ Support Desk ~</h1>
  <hr>
  <div class="row justify-content-center">
    <div class="form-group col-md-3 col-md-offset-7">
      <br>
      <input type="text" id="inputUsername6" placeholder="Username" class="form-control mx-sm-3 text-center">
      <br>
      <input type="password" id="inputPassword6" placeholder="Password" class="form-control mx-sm-3 text-center">
      <br>
      <button type="button" class="btn btn-primary btn-lg">Login</button>
    </div>
  </div>
  <br>
</div>

.form-group {
  text-align: -webkit-center;
  text-align: center;
}

3 commentaires

Hé, mais encore une chose ... Le bouton n'est pas vraiment au centre ou peut-être que les entrées sont peut-être trop longues, car dans l'aperçu, vous pouvez voir une différence entre le centre du bouton et les entrées

@DzITC il est au centre. Ce que vous voyez, ce sont les requêtes multimédias de bootstrap sur les entrées qui se comportent mal.

OK, comment puis-je le rendre un peu plus lisse?: D

1
votes

Il vous suffit d'ajouter .text-center add on parent DIV

<div class="container">
    <h1 class="page-header text-center apie_m_cga">~ Support Desk ~</h1>
    <hr>
    <div class="row justify-content-center">
        <div class="form-group col-md-3 col-md-offset-7 align-center text-center">
        <br>
        <input type="text" id="inputUsername6" placeholder="Username" class="form-control mx-sm-3 text-center">
        <br>
        <input type="password" id="inputPassword6" placeholder="Password" class="form-control mx-sm-3 text-center">
        <br>
        <button type="button" class=" btn-primary btn-lg">Login</button>
        </div>
    </div>
    <br>
</div>



    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">


  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

0 commentaires

2
votes

ajouter une classe de centre de texte au div qui contient la classe de groupe de formulaires:

<div class="container">
    <h1 class="page-header text-center apie_m_cga">~ Support Desk ~</h1>
    <hr>
    <div class="row justify-content-center ">
        <div class="form-group col-md-3 col-md-offset-7 align-center text-center">
        <br>
        <input type="text" id="inputUsername6" placeholder="Username" class="form-control mx-sm-3 text-center">
        <br>
        <input type="password" id="inputPassword6" placeholder="Password" class="form-control mx-sm-3 text-center">
        <br>
        <button type="button" class="btn btn-primary btn-lg">Login</button>
        </div>
    </div>
    <br>
</div>

0 commentaires

1
votes

Je vous suggère de faire en sorte que le bouton ait la même longueur que les champs de saisie, cela rendra le formulaire meilleur.

Essayez ceci:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="container">
    <h1 class="page-header text-center apie_m_cga">~ Support Desk ~</h1>
    <hr>
    <div class="row justify-content-center">
        <div class="form-group col-md-3 col-md-offset-7 align-center ">
        <br>
        <input type="text" id="inputUsername6" placeholder="Username" class="form-control text-center">
        <br>
        <input type="password" id="inputPassword6" placeholder="Password" class="form-control col-12 text-center">
        <br>
        <button type="button" class="btn col-12 btn-primary">Login</button>
        </div>
    </div>
    <br>
</div>

0 commentaires