1
<form>
 <div class="row">
        <div class="col sm-col-12 align-items-center">
          <div class="row ">
            <div class="form-outline contenido col-6 sm-col-12  ">
              <label for="nombre">Nombre</label>
              <input type="text" class="form-control" placeholder="Nombre">
            </div>
            <div class="form-outline contenido col-6 sm-col-12">
              <label for="apellido">Apellido</label>
              <input type="text" class="form-control" placeholder="Apellido">
            </div>
          </div>
          <div class="form-outline contenido col-12 ">
            <label for="correo eléctronico">Correo</label>
            <input type="text" class="form-control" placeholder="ejemplo@kittycakes.com">
          </div>

Los input del nombre y apellido se encuentran dentro de un row y necesito se alineen con los input de abajo.

También quisiera saber la manera para que, cuando se vea desde una pantalla pequeña, se muestre en sm-col-12 ya que ahorita se muestra como en col-6 aun cuando ya puse el código sm-col-12 dentro de la clase.

0

1 respuesta 1

0

En Bootstrap 4 la clase "sm-col-12" no existe, en su lugar debes usar "col-sm-12", sin embargo para lograr el comportamiento que deseas debes invertir las clases, ya que "col-6" hará que el input ocupe la mitad del espacio disponible y no toda la pantalla.

Para lograr tu objetivo este ejemplo debe ser suficiente:

    <form>
        <div class="row">
            <div class="form-outline contenido col-12 col-sm-6">
                <label for="nombre">Nombre</label>
                <input type="text" class="form-control" placeholder="Nombre">
            </div>
            <div class="form-outline contenido col-12 col-sm-6">
                <label for="apellido">Apellido</label>
                <input type="text" class="form-control" placeholder="Apellido">
            </div>
            <div class="form-outline contenido col-12 col-sm-6">
                <label for="correo eléctronico">Correo</label>
                <input type="text" class="form-control" placeholder="ejemplo@kittycakes.com">
            </div>
        </div>
     </form>

Saludos.

1

Tu Respuesta

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

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