Home / Questions / 24453
Accepted
ganedugo
Asked: 2020-09-21 07:58:52 +0800 CST 2020-09-21 07:58:52 +0800 CST

Tricky Bootstrap Form! - Reduce space

  • 772

enter image description hereenter image description here

I'm new to web design, searching the web I found the bootstrap framework and it seemed super...but I tried to design a form like the one in the image and I couldn't find the way to do it .

With the help of some people in this forum I was able to align the two text boxes with Bootstrap, but I couldn't make them more united to give the form more uniformity, how could this be achieved?

Patient Entry Identification Type Identification Number First Name Middle NameFirst Surname Second Surname Sex Male Female Date of Birth Marital StatusSingle Married Occupation Address Landline PhoneCell Email CityDepartment Regime Type of Affiliate Contributor Additional Beneficiary EPSRank 1 2 3 Not Applicable SubmitSendSend 
</div>

Untitled document 

<body>
    <div class="container">
        <br>
        <br>
        <br>
        <div class="panel panel-primary">
            <div class="panel-heading">Ingreso de Pacientes</div>
            <div class="panel-body">
                <form id="form" class="form-horizontal "role="form">
                    <div class="row">
                        <div class="form-group col-md-6">
                            <label for="ejemplo_email_3" class="col-lg-5 control-label" name="nombre">Primer Nombre</label>
                            <div class="col-lg-5">
                                <input type="text" class="form-control"  name="text_nom1" id="text_nom1" required/>
                                <span class="help-block"></span>
                            </div>
                        </div>
                        <div class="form-group col-md-6">
                            <label for="ejemplo_email_3" class="col-lg-5 control-label">Segundo Nombre</label>
                            <div class="col-lg-5">
                                <input class="form-control"  name="text_nom2" id="text_nom2">
                            </div>
                        </div>
                    </div>
                    <div class="row">  
                        <div class="form-group col-md-6">
                            <label for="ejemplo_email_3" class="col-lg-5 control-label">Primer Apellido</label>
                            <div class="col-lg-5">
                                <input class="form-control"  name="text_ape1" id="text_ape1">
                            </div>
                        </div>
                        <div class="form-group col-md-6">
                            <label for="ejemplo_email_3" class="col-lg-5 control-label">Segundo Apellido</label>
                            <div class="col-lg-5">
                                <input class="form-control"  name="text_ape2" id="text_ape2">
                            </div>
                        </div>
                    </div> 
                    <div class="row"> 
                        <div class="form-group form-inline col-md-6">
                            <label for="ejemplo_email_3" class="col-lg-5 control-label">Ciudad</label>
                            <div class="col-lg-2">
                                <input class="form-control" id="ejemplo_password_3" name="text_ciu" id="text_ciu">
                            </div>
                            <div class="col-lg-3">
                                <input class="form-control" id="ejemplo_password_3" name="text_ciu" id="text_ciu">
                            </div>
                        </div>
                        <div class="form-group col-md-6">
                            <label for="ejemplo_email_3" class="col-lg-5 control-label">Departamento</label>
                            <div class="col-lg-5">
                                <input class="form-control" id="ejemplo_password_3" name="text_dep" id="text_dep">
                            </div>
                        </div>
                    </div>
                                            <div class="row">
                        <div class="col-sm-offset-5 col-sm-2 text-center">
                            <div class="btn-group" data-toggle="buttons">
                                <button type="button" id="btn_enviar" class="btn btn-primary">Enviar</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

bootstrap

3 Answers

  1. Best Answer

    You need to understand how columns work, how they are nested, and how they are given different dimensions depending on the width of the browser.

    You were close to getting it!

    In each column you can combine the sizes col-xs-1/12, col-sm-1/12, col-md-1/12and col-lg-1/12to achieve the desired structure.

    In this particular case, without going deeply into modifying the cssoriginal of bootstrapto adjust the separation between elements, you would need something like this:

    <div class="container">
    <div class="panel panel-primary">
        <div class="panel-heading">Ingreso de Pacientes</div>
        <div class="panel-body">
            <form id="form" class="form-horizontal" role="form">

                <div class="row">
                    <div class="form-group col-md-6">
                        <label for="ejemplo_email_3" class="col-md-4 control-label" name="nombre">Primer Nombre</label>

                        <div class="col-md-8">
                            <input class="form-control" name="text_nom1" id="text_nom1" required/>
                        </div>
                    </div>
                    <div class="form-group col-md-6">
                        <label for="ejemplo_email_3" class="col-md-5 col-lg-4 control-label">Segundo Nombre</label>

                        <div class="col-md-7 col-lg-8">
                            <input class="form-control" name="text_nom2" id="text_nom2">
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="form-group col-md-6">
                        <label for="ejemplo_email_3" class="col-md-4 control-label">Primer Apellido</label>

                        <div class="col-md-8">
                            <input class="form-control" name="text_ape1" id="text_ape1">
                        </div>
                    </div>
                    <div class="form-group col-md-6">
                        <label for="ejemplo_email_3" class="col-md-5 col-lg-4 control-label">Segundo Apellido</label>

                        <div class="col-md-7 col-lg-8">
                            <input class="form-control" name="text_ape2" id="text_ape2">
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="form-group col-md-6">
                        <label for="ejemplo_email_3" class="col-md-4 control-label">Ciudad</label>
                        <div class="col-md-8">
                            <div class="row">
                                <div class="col-xs-4 col-sm-3 col-md-4 col-lg-4">
                                    <input class="form-control" id="ejemplo_password_3" name="text_ciu" id="text_ciu">
                                </div>
                                <div class="col-xs-8 col-sm-9 col-md-8 col-lg-8">
                                    <input class="form-control" id="ejemplo_password_3" name="text_ciu" id="text_ciu">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group col-md-6">
                        <label for="ejemplo_email_3" class="col-md-5 col-lg-4 control-label">Departamento</label>

                        <div class="col-md-7 col-lg-8">
                            <input class="form-control" id="ejemplo_password_3" name="text_dep" id="text_dep">
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-sm-offset-5 col-sm-2 text-center">
                        <div class="btn-group" data-toggle="buttons">
                            <button type="button" id="btn_enviar" class="btn btn-primary">Enviar</button>
                        </div>
                    </div>
                </div>

            </form>
        </div>
    </div>
</div>

    But by default, bootstrapit aligns the labels labelto the right margin.

    With a line cssand indicating a idcustom to the form ( so that it does not affect other forms ) it is solved.

    #form label { text-align : left; }
    • 3

  2. I recommend you take a look at http://bootsnipp.com/forms where it helps you to generate the HTMLnecessary form using drag and drop, controlesbased on this website we have the following (vertical):

    <form class="form-horizontal">
<fieldset>

<!-- Form Name -->
<legend>Form Name</legend>

<!-- Text input-->
<div class="form-group">
  <label class="col-md-4 control-label" for="text_nom1">Primer nombre</label>  
  <div class="col-md-4">
  <input id="text_nom1" name="text_nom1" placeholder="Primer nombre" class="form-control input-md" type="text">

  </div>
</div>

<!-- Text input-->
<div class="form-group">
  <label class="col-md-4 control-label" for="text_nom2">Segundo nombre</label>  
  <div class="col-md-4">
  <input id="text_nom2" name="text_nom2" placeholder="Segundo nombre" class="form-control input-md" type="text">

  </div>
</div>

<!-- Text input-->
<div class="form-group">
  <label class="col-md-4 control-label" for="text_ape1">Primer apellido</label>  
  <div class="col-md-4">
  <input id="text_ape1" name="text_ape1" placeholder="Primer apellido" class="form-control input-md" type="text">

  </div>
</div>

<!-- Text input-->
<div class="form-group">
  <label class="col-md-4 control-label" for="text_ape2">Segundo apellido</label>  
  <div class="col-md-4">
  <input id="text_ape2" name="text_ape2" placeholder="Segundo apellido" class="form-control input-md" type="text">

  </div>
</div>

<!-- Text input-->
<div class="form-group">
  <label class="col-md-4 control-label" for="text_ciu_nom">Ciudad nombre</label>  
  <div class="col-md-4">
  <input id="text_ciu_nom" name="text_ciu_nom" placeholder="Ciudad nombre" class="form-control input-md" type="text">

  </div>
</div>

<!-- Text input-->
<div class="form-group">
  <label class="col-md-4 control-label" for="text_dep">Departamento</label>  
  <div class="col-md-4">
  <input id="text_dep" name="text_dep" placeholder="Departamento" class="form-control input-md" type="text">

  </div>
</div>

<!-- Text input-->
<div class="form-group">
  <label class="col-md-4 control-label" for="text_ciu_cod">Ciudad Código</label>  
  <div class="col-md-4">
  <input id="text_ciu_cod" name="text_ciu_cod" placeholder="Ciudad Código" class="form-control input-md" type="text">

  </div>
</div>

<!-- Button -->
<div class="form-group">
  <label class="col-md-4 control-label" for="btn_enviar"></label>
  <div class="col-md-4">
    <button id="btn_enviar" name="btn_enviar" class="btn btn-default">Enviar</button>
  </div>
</div>

</fieldset>
</form>

    Also at http://bootsnipp.com/ you can find various examples based on Bootstrap. Finally here are a couple of good tutorials explained step by step:

    Although in English -> with a translator you do it or learn the language in:

    I hope you find it useful :D

    • 3

  3. bootstrap is based on a column layout: at the following url you can find the information to get started http://getbootstrap.com/getting-started/

    In short, you have 12 columns to spread the content of the pages. So there would be many ways to replicate the form you share. For example, one of the forms would be the following:

    <!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" href="Styles/bootstrap.min.css">     
</head>
<body>
    <div class="col-xs-3">
            <p>Primer Nombre</p>                
            <p>Primer Apellido</p>
            <p>Ciudad</p>
    </div>      
    <div class="col-xs-3">
            <input type="text"></input>             
            <input type="text"></input>
            <div>
                <input style="display:inline; width:60px" type="text" ></input>
                <input style="display:inline; width:60px" type="text" ></input>
            </div>
    </div>      
    <div class="col-xs-3">
            <p>Primer Nombre</p>                
            <p>Primer Apellido</p>
    </div>      
    <div class="col-xs-3">
            <input type="text"></input>             
            <input type="text"></input>
    </div>  
</body>

    Note that the total of the columns with class col-xs-3 adds up to 12 columns, where the number 3 indicates the number of columns. Since col-xs-3 is 4 times, that's where the total of 12 columns is added.

    The important thing about bootstrap is to modify the number of columns that a content uses depending on the screen resolutions, so I recommend that you use the documentation in the link that I share so that you learn how to use the tool properly.

    Greetings.

    • 2