0

Estoy realizando un formulario, pero el instructor aun no nos ha dado BOOTSTRAP, sin embargo dice que averigüemos y vayamos metiendo cosas de bootstrap.

Necesito que en este formulario me quede el input enfrente del label (o bueno, en fila) y no en columna debajo del label.

Este es mi código y anexaré imagen de vista de navegador.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">

<div class="row">
  <div class="container">
    <h1>BUZON DE SUGERENCIAS</h1>
    <form method="post" action="ejercicio_funciones_4.php">
      <div class="col-lg-3 ">
        <label for="fecha">Fecha </label> <input type="date" class="form-control" name="fecha"> <br>
        <label for="name">Nombre </label> <input type="text" class="form-control" name="nombre" placeholder="Pepe Marín"> <br>
        <label for="movil">Celular </label> <input type="tel" class="form-control" name="movil" placeholder="+57 3218695536"> <br>
        <label for="mensaje">Mensaje </label> <textarea rows="3" cols="20" class="form-control"></textarea> <br><br>
        <input type="submit" class="btn btn-primary" value="Enviar datos al buzon"></button>
      </div>
    </form>
  </div>
</div>

quiero los campos del input al frente

4 respuestas 4

2

Para que el formulario te quede como quieres simplemente debes seguir la estructura que da Bootstrap en su documentación , acá te dejo el ejemplo del código (ejecútalo en pantalla completa ya que para el ejemplo solo usé las clases col-lg, si lo deseas responsive puedes utilizar el resto de clases del Grid System)

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="row">
  <div class="container">
    <h1>BUZON DE SUGERENCIAS</h1>
    <form method="post" action="ejercicio_funciones_4.php" class="form-horizontal">
      <div class="col-lg-4">
        <div class="form-group">
            <label class="col-lg-3 control-label" for="fecha">Fecha </label>
            <div class="col-lg-9">
                <input type="date" class="form-control" name="fecha">
            </div>
        </div>

        <div class="form-group">
            <label class="col-lg-3 control-label" for="name">Nombre </label>
            <div class="col-lg-9">
                <input type="text" class="form-control" name="nombre" placeholder="Pepe Marín">
            </div>
        </div>

        <div class="form-group">
            <label class="col-lg-3 control-label" for="movil">Celular </label>
            <div class="col-lg-9">
                <input type="tel" class="form-control" name="movil" placeholder="+57 3218695536">
            </div>
        </div>

        <div class="form-group">
            <label class="col-lg-3 control-label" for="mensaje">Mensaje </label>
            <div class="col-lg-9">
                <textarea  rows="3" cols="20" class="form-control"></textarea>
            </div>
        </div>

        <div class="form-group">
            <div class="col-lg-offset-3 col-lg-9">
                <input type="submit" class="btn btn-primary" value="Enviar datos al buzon"></button>
            </div>
        </div>
      </div>
    </form>
  </div>
</div>

1

para alinear formularios es muy sencillo. Te dejare este ejemplo y espero que te sea de mucha ayuda.

<div>
        <form action="" class="form-inline justify-content-center flex-column flex-md-row my-3"><!-- form-inline -->
                <div class="form-group my-2"> 
                    <label for="" class="mx-2 d-none d-md-block">Nombre: </label>
                    <input type="text" class="form-control" placeholder="Escribe tu nombre">
                </div>
                <div class="form-group my-2">
                    <label for="" class="mx-2 d-none d-md-block">Email</label>
                    <input type="email" class="form-control" placeholder="Escribe aqui tu correo">
                </div>
                <div class="form-group my-2">
                    <button class="btn btn-danger" type="submit">Enviar</button>
                </div>
            </form>
    </div>
1

Esta sería una de las tantas formas de poder realizarlo:

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

        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" >          
              <form class="form-horizontal" id="formulario">
                     <br>
                     <div class="form-group">
                       <label for="" class="control-label col-lg-4 col-lg-offset-1 col-md-4 col-md-offset-1 col-sm-4 col-sm-offset-1 col-xs-4 col-xs-offset-1">Documento(*):</label>
                       <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                         <input type="text" name="documentoIdentidad"  class="form-control" placeholder="Documento" id="inputCA" >
                       </div>
                     </div>
    
                     <div class="form-group">
                       <label for="" class="control-label col-lg-4 col-lg-offset-1 col-md-4 col-md-offset-1 col-sm-4 col-sm-offset-1 col-xs-4 col-xs-offset-1">Nombre(*):</label>
                       <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                         <input type="text" name="nombrePersona" class="form-control" placeholder="Primer Apellido" id="inputCA">
                       </div>
                     </div>
    
                     <div class="form-group">
                       <label for="" class="control-label col-lg-4 col-lg-offset-1 col-md-4 col-md-offset-1 col-sm-4 col-sm-offset-1 col-xs-4 col-xs-offset-1">Apellido:</label>
                       <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                         <input type="text" name="apellidoPersona" class="form-control" placeholder="Apellido" id="inputCA">
                       </div>
                     </div>
              </form>
    </div>

Nota: Debes de aprender a manejar las rejillas si quieres que tu web sea responsive.

Aquí encontrarás toda la documentación al respecto

1

Creo que lo que quieres es esto...

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
   <div class="container">
      <h1>BUZON DE SUGERENCIAS</h1>
      <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" >
         <form class="form-horizontal" id="formulario" method="post" action="ejercicio_funciones_4.php">
            <br>
            <div class="form-group">
               <label for="fecha" class="control-label col-lg-4 col-lg-offset-1 col-md-4 col-md-offset-1 col-sm-4 col-sm-offset-1 col-xs-4 col-xs-offset-1">Fecha: </label>
               <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                  <input type="date" name="fecha"  class="form-control" id="fecha" >
               </div>
            </div>
            <div class="form-group">
               <label for="nombre" class="control-label col-lg-4 col-lg-offset-1 col-md-4 col-md-offset-1 col-sm-4 col-sm-offset-1 col-xs-4 col-xs-offset-1">Nombre: </label>
               <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                  <input type="text" name="nombre" class="form-control" placeholder="Pepe Marín" id="nombre">
               </div>
            </div>
            <div class="form-group">
               <label for="movil" class="control-label col-lg-4 col-lg-offset-1 col-md-4 col-md-offset-1 col-sm-4 col-sm-offset-1 col-xs-4 col-xs-offset-1">Celular: </label>
               <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                  <input type="tel" name="movil" class="form-control" placeholder="+57 3218695536" id="movil">
               </div>
            </div>
            <div class="form-group">
               <label for="mensaje" class="control-label col-lg-4 col-lg-offset-1 col-md-4 col-md-offset-1 col-sm-4 col-sm-offset-1 col-xs-4 col-xs-offset-1">Mensaje: </label>
               <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                  <textarea  rows="3" cols="20" name="mensaje" class="form-control" placeholder="+57 3218695536" id="mensaje">
                  </textarea> <br><br>
               </div>
               <div class="form-group">
                  <label for="" class="control-label col-lg-4 col-lg-offset-1 col-md-4 col-md-offset-1 col-sm-4 col-sm-offset-1 col-xs-4 col-xs-offset-1"></label>
                  <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                     <input type="submit" class="btn btn-primary" value="Enviar datos al buzon">
                  </div>
               </div>
            </div>
         </form>
      </div>
   </div>
</div>

Espero te Sirva! Saludos!

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.