0

Usando Bootstrap estoy tratando de poner los labels de un form en los costados y se deforma todo el form.

Así se ve ahora

Quisiera que por ej: el label "Nombre:" esté a la izquierda del input "nombre".

Pero si uso la clase "form-inline" pasa esto: form deforme

De qué manera podría lograr poner los labels a la izquierda sin tener este resultado?

Mi código html se ve así:

<div class="container">
<h1>Editar Cuenta</h1>
<hr>
<form role="form">
    <div class="well">
        <div class="row">
            <div class="col-xs-6 col-sm-6 col-md-6">
                <div class="form-group">
                    <label for="nombre">Nombre:</label>
                <input type="text" name="nombre" id="nombre" class="form-control" placeholder="Nombre" tabindex="1">
                </div>
            </div>

            <div class="col-xs-6 col-sm-6 col-md-6">
                <div class="form-group">
                    <label for="apellido">Apellido:</label>
                    <input type="text" name="apellido" id="apellido" class="form-control" placeholder="Apellido" tabindex="2">
                </div>
            </div>
        </div>

        <div class="row">

            <div class="col-xs-6 col-sm-6 col-md-6">
                <div class="form-group">
                    <label for="email">Email:</label>
                    <input type="email" name="email" id="email" class="form-control" placeholder="Email" tabindex="4">
                </div>
            </div>

            <div class="col-xs-6 col-sm-6 col-md-6">
                <div class="form-group">
                    <label for="celular">Celular:</label>
                    <input type="number" name="celular" id="celular" class="form-control" placeholder="Celular" tabindex="3">
                </div>
            </div>

        </div>

        <div class="form-group">
            <label for="dni">Número de D.N.I.:</label>
            <input type="number" name="dni" id="dni" class="form-control" placeholder="Número de D.N.I." tabindex="5" disabled>
        </div>

        <div class="form-group">
            <label for="contraseña">Contraseña actual:</label>
            <input type="password" name="password" id="password" class="form-control" placeholder="Contraseña actual" tabindex="6">
        </div>

        <div class="row">
            <div class="col-xs-6 col-sm-6 col-md-6">

                <div class="form-group">
                    <label for="password">Contraseña nueva:</label>
                    <input type="password" name="password" id="password" class="form-control" placeholder="Contraseña nueva" tabindex="6">
                </div>

            </div>

            <div class="col-xs-6 col-sm-6 col-md-6">

                <div class="form-group">
                    <label for="password">Confirmar contraseña nueva:</label>
                    <input type="password" name="password_confirmation" id="password_confirmation" class="form-control" placeholder="Confirmar contraseña nueva" tabindex="7">
                </div>

            </div>
        </div>

        <div class="row">
            <div class="col-xs-6 col-md-6"><input type="submit" value="Guardar" class="btn btn-danger btn-block btn-lg" tabindex="7"
                title="Guardar datos ingresados"></div>

            <div class="col-xs-6 col-md-6"><input type="submit" value="Cancelar" class="btn btn-block btn-lg" tabindex="8">
            </div>
        </div>
</form>

3
  • ¿Podrías agregarnos el código que tienes actualmente? Ahora mismo es muy difícil adivinar la estructura de HTML/CSS que tienes en tu código. el 20 ene. 2018 a las 13:08
  • Agregué mi código html.
    – L_C
    el 20 ene. 2018 a las 13:25
  • A tu form le hace falta la clase form-inline o form-horizontal, dependiendo cual vayas a utilizar el 20 ene. 2018 a las 13:31

3 respuestas 3

1

Para hacer eso con bootstrap necesitas añadir algunas cosas a tu código, primero al div form group tienes que añadirle row para convertirlo a una fila, luego a tu label tienes que añadrile las clases col-form-label y col-x-x, la primera para que se alinee verticalmente con el input al que acompaña y la segunda para indicar cuantas columas ocupará, en este ejemplo he puesto col-sm-4, y por último el input tienes que encerrarlo en un div y a ese div darle la clase col-x-x para indicarle las columnas que ocupará, en este ejemplo he puesto col-sm-8, aquí tienes un label y un input individuales con lo que te he dicho añadido para que lo veas individualmente:

<div class="form-group row">
                <label for="nombre" class="col-form-label col-sm-4">Nombre:</label>
              <div class="col-sm-8">
            <input type="text" name="nombre" id="nombre" class="form-control" placeholder="Nombre" tabindex="1">
              </div>
            </div>

Y este es tu ejemplo añadiendo lo indicado:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
<div class="container">
<h1>Editar Cuenta</h1>
<hr>
<form role="form">
    <div class="well">
        <div class="row">
            <div class="col-xs-6 col-sm-6 col-md-6">
                <div class="form-group row">
                    <label for="nombre" class="col-form-label col-sm-4">Nombre:</label>
                  <div class="col-sm-8">
                <input type="text" name="nombre" id="nombre" class="form-control" placeholder="Nombre" tabindex="1">
                  </div>
                </div>
            </div>

            <div class="col-xs-6 col-sm-6 col-md-6">
                <div class="form-group row">
                    <label for="apellido" class="col-form-label col-sm-4">Apellido:</label>
                  <div class="col-sm-8">
                    <input type="text" name="apellido" id="apellido" class="form-control" placeholder="Apellido" tabindex="2">
                  </div>
                </div>
            </div>
        </div>

        <div class="row">

            <div class="col-xs-6 col-sm-6 col-md-6">
                <div class="form-group row">
                    <label for="email" class="col-form-label col-sm-4">Email:</label>
                  <div class="col-sm-8"> 
                    <input type="email" name="email" id="email" class="form-control" placeholder="Email" tabindex="4">
                  </div>
                </div>
            </div>

            <div class="col-xs-6 col-sm-6 col-md-6">
                <div class="form-group row">
                    <label for="celular" class="col-form-label col-sm-4">Celular:</label>
                  <div class="col-sm-8">
                    <input type="number" name="celular" id="celular" class="form-control" placeholder="Celular" tabindex="3">
                  </div>
                </div>
            </div>

        </div>

        <div class="form-group row">
            <label for="dni" class="col-form-label col-sm-4">Número de D.N.I.:</label>
          <div class="col-sm-8">
            <input type="number" name="dni" id="dni" class="form-control" placeholder="Número de D.N.I." tabindex="5" disabled>
          </div>
        </div>

        <div class="form-group row">
            <label for="contraseña" class="col-form-label col-sm-4">Contraseña actual:</label>
          <div class="col-sm-8">
            <input type="password" name="password" id="password" class="form-control" placeholder="Contraseña actual" tabindex="6">
          </div>
        </div>

        <div class="row">
            <div class="col-xs-6 col-sm-6 col-md-6">

                <div class="form-group row">
                    <label for="password" class="col-form-label col-sm-4">Contraseña nueva:</label>
                  <div class="col-sm-8">
                    <input type="password" name="password" id="password" class="form-control" placeholder="Contraseña nueva" tabindex="6">
                  </div>
                </div>

            </div>

            <div class="col-xs-6 col-sm-6 col-md-6">

                <div class="form-group row">
                    <label for="password" class="col-form-label col-sm-4">Confirmar contraseña nueva:</label>
                  <div class="col-sm-8">
                    <input type="password" name="password_confirmation" id="password_confirmation" class="form-control" placeholder="Confirmar contraseña nueva" tabindex="7">
                  </div>
                </div>

            </div>
        </div>

        <div class="row">
            <div class="col-xs-6 col-md-6"><input type="submit" value="Guardar" class="btn btn-danger btn-block btn-lg" tabindex="7"
                title="Guardar datos ingresados"></div>

            <div class="col-xs-6 col-md-6"><input type="submit" value="Cancelar" class="btn btn-block btn-lg" tabindex="8">
            </div>
        </div>
</form>

0

Bootstrap cuenta con una propiedad que es form-inline

<form action="" class="form-inline">
    <div class="form-group">
          <label for="nombre">Nombre</label>
          <input class="form-control" type="text" id="nombre" placeholder="Nombre">
    </div>
</form>

De esta forma el label estara en linea junto con tu input. Otra alternativa tambien seria el form-horizontal

<form action="" class="form-horizontal">
       <div class="form-group">
           <label class="col-sm-2" for="nombre">Nombre</label>
               <div class="col-sm-10">
                  <input class="form-control" type="text" id="nombre" placeholder="Nombre">
              </div>
       </div>
</form>
1
  • 2
    Precisamente el OP es lo que dice, que está utilizando la propiedad form-inline y muestra un ejemplo de como le queda en su proyecto. Hasta que no veamos un ejemplo de como tiene su HTML no podremos ayudarle. el 20 ene. 2018 a las 13:25
0

Has probado de esta forma? (definiendoles un tamaño fijo a ambos)

<form method="" action="" >
    <div class="form-group">
        <label class="col-md-2"> Nombre </label>
        <div class="col-md-4">
            <input type="text" id="nombre" class="form-control">
        </div>
        <label class="col-md-2"> Apellido </label>
        <div class="col-md-4">
            <input type="text" id="apellido" class="form-control">
        </div>
    </div>
</form>
4
  • Aún así, queda un poco deforme.
    – L_C
    el 20 ene. 2018 a las 13:53
  • Podrías pasar una captura de como queda? Porque así como te dije en mi caso queda así*... Quizás con un poquito de CSS extra ya podamos solucionar el tema... *: imgur.com/a/Bm55E
    – KuroNeko
    el 20 ene. 2018 a las 14:37
  • Sí, disculpa. Así es como queda *i.imgur.com/IGJyopB.jpg
    – L_C
    el 20 ene. 2018 a las 15:42
  • No sé por qué el nombre queda con ese espacio y los demás campos no.
    – L_C
    el 20 ene. 2018 a las 15:49

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.