none
Centrar form-horizontal bootstrap RRS feed

  • Pregunta

  • Buenos días,

    No encuentro solución para poder centrar un formulario en bootstrap 3 del tipo form-horizontal.

    Estoy buscando pero no lo logro con el tipo form-horizontal, pero si con el tipo de formulario básico.

    Agradecería su ayuda, comentario, sugerencia.

    Muchas gracias.

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<meta name="viewport" content="width=device-width, initial-scale=1">
    	<title>Document</title>
    	<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
    </head>
    <body>
    
    	<div class="container well">
    		
    		<!--TITULO DE FORMULARIO-->
    		<div class="row">
    			<div class="col-xs-12">
    				<center><h2>Perfil de usuario</h2></center>
    			</div>
    		</div>
    		<br> <br />
    		
    		<!--FORMULARIO-->
    		<form class="form-horizontal">
    		
    			<!-- sería cada row-->
    			<div class="form-group">
    				<label class="col-sm-2 control-label" for="formGroup">Nombre de usuario</label>
    				<div class="col-sm-4">
    					<input class="form-control" type="text" id="formGroup" disabled>
    				</div>
    			</div>
    
    		</form>
    
    	</div>
        
    	<script src="js/jquery-1.11.1.js"></script>
    	<script src="js/bootstrap.js"></script>
    </body>
    </html>

    miércoles, 17 de diciembre de 2014 13:24

Todas las respuestas

  • hola

    y si usas algo como esto

    <div class="container">
        <div class="row">
            <div class="col-md-6 col-md-offset-3">
                <form>
                    ...
                </form>
            </div>
        </div>
    </div>

    como veras la idea es centrar el contenido y dentro este el form

    How to center form in twitter bootstrap?

    saludos


    Leandro Tuttini

    Blog
    MVP Profile
    Buenos Aires
    Argentina

    • Propuesto como respuesta fredsale miércoles, 23 de septiembre de 2015 14:52
    miércoles, 17 de diciembre de 2014 15:27
  • Gracias por la respuesta Leandro,

    Utilice eso, y luego el label me quedaba en varias filas, pero cambiando la cantidad de columnas que ocupaba el form.group(4 col para el label + 8 col para el textbox) quedó alineado!.

    Muchas gracias.

    Dejo el ejemplo:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<meta name="viewport" content="width=device-width, initial-scale=1">
    	<title>Document</title>
    	<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
    </head>
    <body>
    
    	<div class="container well">
    		
    		<!--TITULO DE FORMULARIO-->
    		<div class="row">
    			<div class="col-md-12">
    				<h2><p class="text-center">Perfil de usuario</p></h2>
    			</div>
    		</div>
    		<br> <br />
    		
    		<div class="col-md-6 col-md-offset-3">
    			<!--FORMULARIO-->
    			<form class="form-horizontal">
    			
    				<!-- sería cada row-->
    				<div class="form-group">
    					<label class="col-md-4 control-label" for="formGroup">Nombre de usuario</label>
    					<div class="col-md-8">
    						<input class="form-control" type="text" id="formGroup" disabled>
    					</div>
    				</div>
    
    			</form>
    	</div>
    
    	</div>
        
    	<script src="js/jquery-1.11.1.js"></script>
    	<script src="js/bootstrap.js"></script>
    </body>
    </html>

    <form class="form-horizontal">
    </form>
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css" />
    miércoles, 17 de diciembre de 2014 15:53