0

Tengo un formulario de contacto el cual quiero que los div de la class col-md-6 col-sm-4 se posicionen en forma horizontal y no en forma vertical abajo del otro.

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<section id="contact">
      <div class="container">
        <div class="row">
         
          <div class="col-md-6 col-sm-12">
            <form action="#" method="get"  data-wow-delay="0.6s">
              <div class="col-md-6 col-sm-4">
                <input type="text" class="form-control" placeholder="Name" name="name">
              </div>
              <div class="col-md-6 col-sm-4">
                <input type="email" class="form-control" placeholder="Email" name="email">
              </div>
              <div class="col-md-12 col-sm-12">
                <textarea class="form-control" placeholder="Message" rows="7" name="message"></textarea>
              </div>
              <div class="col-md-offset-4 col-md-8 col-sm-offset-4 col-sm-8">
                <input type="submit" class="form-control" value="ENVIAR">
              </div>
            </form>
          </div>

        </div>
      </div>
    </section>

8
  • Ya que colocaste en un snippet tu código, no olvides agregar bootstrap como librería externa. Además: las columnas siempre dentro de filas :)
    – padaleiana
    Commented el 29 feb. a las 19:40
  • Ya tengo la librería de bootstrap agregado y están dentro del row nomas que solo saque esa parte del código.
    – Miguel
    Commented el 29 feb. a las 19:52
  • Bootstrap no está como librería en el snippet, es por eso que se ve como HTML plano. Recuerda agregar un ejemplo mínimo verificable.
    – padaleiana
    Commented el 29 feb. a las 19:53
  • Ya inserte la librería
    – Miguel
    Commented el 29 feb. a las 20:23
  • 1
    te faltaría un row, para que no tome las metricas del row externo al form. podes ponerle la class row al form o un div.row dentro del form ( asi los anchos de cols de los input son relativos a ese row y no el externo q es un col 6) Commented el 29 feb. a las 20:30

1 respuesta 1

0

Siguiendo la documentación de Bootstrap.

Removí la etiqueta <div class="row"> y agregue la clase row directamente en tu etiqueta <form>.

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<section id="contact">
      <div class="container">
             
          <div class="col-md-6 col-sm-12">
            <form class="row" action="#" method="get"  data-wow-delay="0.6s">
              <div class="col-md-6 col-sm-4">
                <input type="text" class="form-control" placeholder="Name" name="name">
              </div>
              <div class="col-md-6 col-sm-4">
                <input type="email" class="form-control" placeholder="Email" name="email">
              </div>
              <div class="col-md-12 col-sm-12">
                <textarea class="form-control" placeholder="Message" rows="7" name="message"></textarea>
              </div>
              <div class="col-md-offset-4 col-md-8 col-sm-offset-4 col-sm-8">
                <input type="submit" class="form-control" value="ENVIAR">
              </div>
            </form>
          </div>
      </div>
    </section>

5
  • Ojo que quedaron columnas sin fila: el form tiene un row, pero su padre (el div) tiene columnas, y no están dentro de otra fila.
    – padaleiana
    Commented el 29 feb. a las 22:51
  • Entonces entendí mal la pregunta, creí que quería las columnas de Name y Email las quería en horizontal.
    – DevArthur
    Commented el 29 feb. a las 23:00
  • el form está dentro de un col-6 de un row, salvo que eso lo quiera quitar y "agrandar" el form no haría falta remover ese row, sino sólo agregar el row interno Commented el 29 feb. a las 23:38
  • @aloMalbarez Hmmm, ¿interno o externo?
    – padaleiana
    Commented el 1 mar. a las 2:09
  • el externo da el ancho al form, col6 es un 50% debe ser para que quede cuadradito al centro, el interno es el que marca la grilla de los input Commented el 1 mar. a las 2:20

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.