web-dev-qa-db-fra.com

Comment centrer la forme 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>
htmlcsstwitter-bootstraptwitter-bootstrap-3
53
Cieja

Un moyen simple est d'ajouter 

.center_div{
    margin: 0 auto;
    width:80% /* value of your choice which suits your alignment */
}

à votre classe .container. Ajoutez width:xx % et vous obtenez un div parfaitement centré!

par exemple :

<div class="container center_div">

mais j'estime que, par défaut, container est centré dans BS!

48
NoobEditor

Il existe un moyen simple de le faire dans le bootstrap. Chaque fois que j'ai besoin de créer un centre div dans une page, je divise toutes les colonnes par 3 (colonnes d'amorçage totales = 12, divisées par 3 >>> 12/3 = 4). La division par quatre me donne trois colonnes. alors je mets ma div dans la colonne du milieu. Et toutes ces maths sont effectuées de cette manière:

<div class="col-md-4 col-md-offset-4">my div here</div>

col-md-4 fait une colonne de 4 colonnes d'amorçage. Disons la colonne principale. col-md-offset-4 ajoute une colonne (d'une largeur de 4 colonnes d'amorçage) aux deux côtés de la colonne principale.

192
Sid

Le nombre total de colonnes d'une ligne doit être égal à 12. Vous pouvez donc créer col-md-4 et col-md-offset-4. Donc, vous divisez vos colonnes en 3 groupes de 4 colonnes chacun. À l'heure actuelle, vous avez un formulaire à 4 colonnes avec un décalage de 6, de sorte que 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, ce qui vous donnerait une forme en 8 colonnes avec 2 colonnes d’espace à gauche et à droite ou col-md-6 en col-md-offset-3 (en 6 colonnes). avec 3 colonnes de chaque côté), etc.

8
user2431058

utilisez la classe centrée avec offset-6 comme ci-dessous.

<body class="container">
<div class="col-lg-1 col-offset-6 centered">
    <img data-src="holder.js/100x100" alt="" />
</div>

6
Ammar

Je suppose que vous essayez de centrer la forme à la fois horizontalement et verticalement par rapport à la division quelconque.

Vous n'avez pas à utiliser de 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%);
}
2
sujithuix

Utilisez d-flex dans la classe 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>
1
SuRa

Il suffit d'utiliser la balise center:

<center>StackOverflow centered</center>

0
DINOLIN Y P JOB