Home / user-14525

ganedugo's questions

Martin Hope
ganedugo
Asked: 2020-09-21 07:58:52 +0800 CST
  • 4

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