0

Tengo un pequeño formulario de clientes en el que tengo que acomodar los datos de un cliente normal (nombre,telefono,direccion,email,residencia), y pues no he podido que mi formulario sea 100% responsivo y que a la vez tenga un buen orden de diseño, hay algun metodo para poder tener una tabla responsiva?

introducir la descripción de la imagen aquí

Actualmente el formulario (se podria decir que es la forma base) se mira así, pero mi cometido es que quiero acomodarlos en una tabla de dos columnas, en el que el "nombre" y su caja de texto tengan a un lado a la etiqueta "no.licencia" y tambien su caja de texto correspondiente, se podria decir que cada quien con su "pareja" y dejando solo al email, alguna idea? Estoy abierto a sugerencias. Gracias

1 respuesta 1

1

Sí es posible utilizando la librería Boostrap 4 en html, te recomiendo ver este video en el que lo explican bastante bien: https://www.youtube.com/watch?v=-9NXJtE1bzI

Y la documentación oficial: https://getbootstrap.com/docs/4.0/components/forms/#form-groups

Aquí hay un código de ejemplo de un formulario responsivo, utilizando la clase column y row que lo que hacen es acomodar esos 2 elementos en una sola fila con 2 columnas.

<form>
    <div class="row">
        <div class="col">
            <input type="text" class="form-control" placeholder="First name">
        </div>
        <div class="col">
            <input type="text" class="form-control" placeholder="Last name">
        </div>
    </div>
</form>

Vista previa del código

Y recuerda agregar la librería Boostrap antes de la etiqueta <head>.

Ya sea mediante el siguiente código:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

O descagandolo del siguiente link:

https://getbootstrap.com/docs/4.1/getting-started/download/

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.