Cómo centrar el formulario en bootstrap 3

¿Cómo puedo centrar mi formulario de inicio de sesión ? Estoy usando la columna bootstrap pero no funciona.

Aquí está mi código:

<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>
Author: ROMANIA_engineer, 2013-12-31
Source

6 answers

Una forma sencilla es agregar 

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

A tu clase .container.Agregue width:xx % a él y obtendrá div perfectamente centrado!

Eg: 

<div class="container center_div">

Pero siento que por defecto container se centra en BS!

 46
Author: NoobEditor,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-12-31 06:47:47

Hay una forma sencilla de hacer esto en bootstrap. Cada vez que necesito hacer un div center en una página divido todas las columnas por 3 ( total bootstrap columns = 12, dividido por 3 >>> 12/3 = 4). Dividiendo por cuatro me da tres columnas. luego puse mi div en la columna central. Y toda esta matemática se realiza de esta manera:

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

Col-md-4 hace una columna de 4 columnas bootstrap.Digamos que la columna principal. col-md-offset-4 agregar una columna (de ancho de 4 columna bootstrap) a ambos lados de la columna principal columna.

 183
Author: Sid,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-07-19 17:35:32

El total de columnas en una fila tiene que sumar hasta 12. Así que puedes hacer col-md-4 col-md-offset-4. Así que tu dividiendo tus columnas en 3 grupos de 4 columnas cada uno. Ahora mismo tiene un formulario de 4 columnas con un desplazamiento de 6, por lo que solo obtiene 2 columnas al lado derecho de su formulario. También puede hacer col-md - 8 col-md-offset - 2 que le daría un formulario de 8 columnas con 2 columnas cada una de espacio a la izquierda y a la derecha o col-md-6 col-md-offset-3 (formulario de 6 columnas con 3 columnas de espacio a cada lado), etc.

 8
Author: user2431058,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-01-02 16:46:13

Utilice la clase centrada con el desplazamiento-6 como muestra abajo.

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

 5
Author: Ammar,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-12-31 06:48:16

Use d-flex en la clase container y luego agregue justify-content-center y 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
Author: Surendher Raja,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-09-27 14:00:32

Supongo que está tratando de centrar la forma tanto horizontal como verticalmente con respecto al div de cualquier contenedor.

No tienes que hacer uso de bootstrap para ello. Simplemente use el método popular (abajo) para centrar el formulario.

.container{
 position relative;
}
.form{
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%,-50%);
}
 1
Author: sujithuix,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-09-27 14:21:34