Comment centrer le formulaire dans bootstrap 3
Comment centrer mon formulaire de connexion ? J'utilise la colonne bootstrap mais cela ne fonctionne pas.
Voici mon code:
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-6">
<h2>Log in</h2>
<div>
<table>
<tr>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
</tr>
</table>
</div>
</div>
</div>
</div>
6 réponses
Un moyen simple est d'ajouter
.center_div{
margin: 0 auto;
width:80% /* value of your choice which suits your alignment */
}
À vous classe .container.Ajoutez width:xx % et vous obtenez div parfaitement centré!
Par exemple:
<div class="container center_div">
Mais je pense que par défaut container est centré EN BS!
Il existe un moyen simple de le faire dans bootstrap. Chaque fois que j'ai besoin de faire un centre div dans une page, je divise toutes les colonnes par 3 ( Total Bootstrap columns = 12, divisé par 3 > > > 12/3 = 4). Diviser par quatre me donne trois colonnes. ensuite, je mets ma div dans la colonne du milieu. Et ce calcul est effectué de cette façon:
<div class="col-md-4 col-md-offset-4">my div here</div>
Col-md-4 fait une colonne de 4 colonnes bootstrap.Disons la colonne principale. col-md-offset-4 Ajouter une colonne (de largeur de 4 colonne bootstrap) aux deux côtés de main colonne.
Le total des colonnes d'une ligne doit s'ajouter à 12. Vous pouvez donc faire le col-md-4 col-md-offset-4. Donc, vous divisez vos colonnes en 3 groupes de 4 colonnes chacun. En ce moment, vous avez un formulaire à 4 colonnes avec un décalage de 6, donc vous n'obtenez que 2 colonnes sur le côté droit de votre formulaire. Vous pouvez également faire col-md - 8 col-md-offset-2 qui vous donnerait un formulaire à 8 colonnes avec 2 colonnes d'espace gauche et droit ou col-md-6 col-md-offset-3 (formulaire à 6 colonnes avec 3 colonnes d'espace de chaque côté), etc.
Utilisez la classe centrée avec offset-6 comme l'exemple ci-dessous.
<body class="container">
<div class="col-lg-1 col-offset-6 centered">
<img data-src="holder.js/100x100" alt="" />
</div>
Utiliser d-flex dans le container, puis ajoutez justify-content-center et align-items-center.
<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>
Je suppose que vous essayez de centrer le formulaire à la fois horizontalement et verticalement par rapport à any container div.
Vous n'avez pas besoin d'utiliser bootstrap pour cela. Utilisez simplement la méthode populaire (ci-dessous) pour centrer le formulaire.
.container{
position relative;
}
.form{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}