1

Tengo el siguiente formulario:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet"/>

<form class="card-block">
  <div class="form-group row card-block">
    <label for="optradio" class="col-md-2 col-form-label">Number of Guests</label>
    <label class="radio">
<input type="radio" class="radioOption" name="optradio" id="option1" value="1">1</label>
    <label class="radio">
<input type="radio" class="radioOption" name="optradio" id="option2" value="2">2</label>
    <label class="radio">
<input type="radio" class="radioOption" name="optradio" id="option3" value="3">3</label>
    <label class="radio">
<input type="radio" class="radioOption" name="optradio" id="option4" value="4">4</label>
    <label class="radio">
<input type="radio" class="radioOption" name="optradio" id="option5" value="5">5</label>
    <label class="radio">
<input type="radio" class="radioOption" name="optradio" id="option6" value="6">6</label>
  </div>
  <div class="form-group row card-block">
    <label for="lastname" class="col-md-2 col-form-label">Date and Time</label>
    <div class="col-6 col-md-5">
      <input type="text" class="form-control" id="date" name="date" placeholder="Date">
    </div>
    <div class="col-6 col-md-5">
      <input type="text" class="form-control" id="time" name="time" placeholder="Time">
    </div>
  </div>
  <div class="form-group row">
    <div class="offset-md-2 col-md-10">
      <button type="submit" class="btn btn-primary">Reserve</button>
    </div>
  </div>
</form>

Y se ve así:

Align Problem

Como se puede observar, los radio, los input y el button están desalineados. Todo esto está dentro de un card-body, aunque es irrelevante porque también sucede si no lo está.

Hay muchas soluciones acá, pero ninguna me funcionó. ¿Alguna idea?

9
  • Tienes que poner en dos Row distintos Commented el 22 jul. 2018 a las 15:38
  • ¿Eso no haría que los radio pasen abajo del label al igual que los input date y time? No veo cómo eso me puede ayudar.
    – kvothe838
    Commented el 22 jul. 2018 a las 15:40
  • Allí te muestro Commented el 22 jul. 2018 a las 15:46
  • Añade un estilo display: block; en cada input Commented el 22 jul. 2018 a las 17:07
  • Dices "Hay muchas soluciones acá, pero ninguna me funcionó", ¿podrías compartir algunas de las soluciones que probaste y no funcionaron? De ese modo no tendríamos que repetir cosas que ya probaste, o podríamos ver si había algún error al aplicarlos al código que se pueda solucionar.
    – Alvaro Montoro
    Commented el 22 jul. 2018 a las 18:54

3 respuestas 3

1

Respetando las rejillas, pones dos row, dentro de la columna de los input

<div class="form-group row card-block">
   <div class="col-6 col-md-5">
       <label for="lastname" class="col-md-2 col-form-label">Date and Time</label>
   </div>
   <div class="col-6 col-md-5">
    <div class="row">
      <input type="text" class="form-control" id="date" name="date" placeholder="Date">
    </div>
     <div class="row">
       <input type="text" class="form-control" id="time" name="time" placeholder="Time">
      </div>
   </div>
</div>
3
  • Eso sólo me alinea los dos inputs y encima me los deja lejísimo del label.
    – kvothe838
    Commented el 23 jul. 2018 a las 18:14
  • Tienes que aplicar lo mismo para tus check Commented el 23 jul. 2018 a las 18:25
  • Gracias, pero el espaciado no me terminaba de convencer, era demasiado y luego tendría que cambiar el padding.
    – kvothe838
    Commented el 24 jul. 2018 a las 1:25
1

Bootstrap 4 usa FlexBox para las columnas, y flexbox tiene la propiedad align-items que te permite alinear los elementos dentro del contenedor flex de forma vertical (análogamente a como lo hace justify-content de forma horizontal). Sólo tendrías que darle el valor center.

Parece que .card-block es lo que contiene a los diferentes inputs, entonces puedes poner align-items: center; para que se alineen verticalmente. Algo así:

.card-block {
  align-items: center;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet"/>

<form class="card-block">
  <div class="form-group row card-block">
    <label for="optradio" class="col-md-2 col-form-label">Number of Guests</label>
    <label class="radio">
<input type="radio" class="radioOption" name="optradio" id="option1" value="1">1</label>
    <label class="radio">
<input type="radio" class="radioOption" name="optradio" id="option2" value="2">2</label>
    <label class="radio">
<input type="radio" class="radioOption" name="optradio" id="option3" value="3">3</label>
    <label class="radio">
<input type="radio" class="radioOption" name="optradio" id="option4" value="4">4</label>
    <label class="radio">
<input type="radio" class="radioOption" name="optradio" id="option5" value="5">5</label>
    <label class="radio">
<input type="radio" class="radioOption" name="optradio" id="option6" value="6">6</label>
  </div>
  <div class="form-group row card-block">
    <label for="lastname" class="col-md-2 col-form-label">Date and Time</label>
    <div class="col-6 col-md-5">
      <input type="text" class="form-control" id="date" name="date" placeholder="Date">
    </div>
    <div class="col-6 col-md-5">
      <input type="text" class="form-control" id="time" name="time" placeholder="Time">
    </div>
  </div>
  <div class="form-group row">
    <div class="offset-md-2 col-md-10">
      <button type="submit" class="btn btn-primary">Reserve</button>
    </div>
  </div>
</form>

3
  • Esa es una de las cosas que intenté y no funcionan. Pero ya lo solucioné. Con meter todos los radio en un div de col-12 funcionó. Gracias!
    – kvothe838
    Commented el 23 jul. 2018 a las 18:36
  • @FacundoYuffrida funcionar, funciona (se puede ver en el código ejecutable de arriba)... otra cosa es que no funcione con tu código porque haya algún conflicto o algo (por eso te pedía que añadieras más en los comentarios de la pregunta). Deberías compartir lo que conseguiste y te funcionó para que le pueda servir de ayuda a otros usuarios que puedan tener el mismo problema (lo menos que conseguirías sería un +1 por mi parte).
    – Alvaro Montoro
    Commented el 23 jul. 2018 a las 21:16
  • Correcto, muchas gracias por recordarme. Ahí lo comenté.
    – kvothe838
    Commented el 24 jul. 2018 a las 1:25
1

Al final solucioné el problema poniendo todos los radios dentro de un div con clase col-12.

Me funcionó lo siguiente:

<form class="card-block">
    <div class="form-group row card-block">
        <label for="optradio" class="col-md-2 col-form-label">Number of Guests</label>
        <div class="col-12 col-md-10">
            <label class="radio">
                <input type="radio" class="radioOption" name="optradio" id="option1" value="1">1</label>
            <label class="radio">
                <input type="radio" class="radioOption" name="optradio" id="option2" value="2">2</label>
            <label class="radio">
                <input type="radio" class="radioOption" name="optradio" id="option3" value="3">3</label>
            <label class="radio">
                <input type="radio" class="radioOption" name="optradio" id="option4" value="4">4</label>
            <label class="radio">
                <input type="radio" class="radioOption" name="optradio" id="option5" value="5">5</label>
            <label class="radio">
                <input type="radio" class="radioOption" name="optradio" id="option6" value="6">6</label>
        </div>
    </div>
    <div class="form-group row card-block">
        <label for="lastname" class="col-md-2 col-form-label">Date and Time</label>
        <div class="col-6 col-md-5">
            <input type="text" class="form-control" id="date" name="date" placeholder="Date">
        </div>
        <div class="col-6 col-md-5">
            <input type="text" class="form-control" id="time" name="time" placeholder="Time">
        </div>
    </div>
    <div class="form-group row card-block">
        <div class="offset-md-2 col-md-10">
            <button type="submit" class="btn btn-primary">Reserve</button>
        </div>
    </div>
</form>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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