form with bootstrap

Question

form with bootstrap

Navigation

#1 by (2 votes)
#2 by (0 votes)

2

I have some problems with a form in Bootstrap, since the input places them very small of their normal size, I am learning to use the Bootstrap grid but I have not understood it very well, so I ask for your help. my code is this

<form id="registrationForm" method="post" class="form-horizontal" action="#">
              <div class="row">

                <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                    <div class="form-group">
                        <label class="col-lg-3 control-label">Nombres</label>
                        <div class="col-lg-3">
                            <input type="text" class="form-control" name="nombre" />
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                     <div class="form-group">
                        <label class="col-lg-3 control-label">Apellidos</label>
                        <div class="col-lg-3">
                            <input type="text" class="form-control" name="apellido" />
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                    <div class="form-group">
                        <label class="col-lg-3 control-label">Correo Electrónico</label>
                        <div class="col-lg-3">
                            <input type="text" class="form-control" name="email" />
                        </div>
                   </div>
                </div>
              </div>
  </form>

bootstrap

asked by Ivxn 25.05.2016 в 17:29

source

2 answers

0

Check that you are loading the bootstrap css correctly.

As you can see by simply copying your code and loading the bootstrap css the controls are resized well:

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

<form id="registrationForm" method="post" class="form-horizontal" action="#">
              <div class="row">

                <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                    <div class="form-group">
                        <label class="col-lg-3 control-label">Nombres</label>
                        <div class="col-lg-3">
                            <input type="text" class="form-control" name="nombre" />
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                     <div class="form-group">
                        <label class="col-lg-3 control-label">Apellidos</label>
                        <div class="col-lg-3">
                            <input type="text" class="form-control" name="apellido" />
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                    <div class="form-group">
                        <label class="col-lg-3 control-label">Correo Electrónico</label>
                        <div class="col-lg-3">
                            <input type="text" class="form-control" name="email" />
                        </div>
                   </div>
                </div>
              </div>
  </form>

answered by 25.05.2016 в 17:34

List of Students in PHP and MySQL Error while Launching activity in the Android Studio emulator

score 2 · Accepted Answer

Your CSS loads it well the only detail you can have is that you are placing the class .col-lg-* try changing that class by .col-sm-* this can be a problem on screens with a small resolution.

The class col-sm-* can be functional as well as screens greater than 996 px , if changing the classes does not work it may be because the bootstrap javascript file is duplicated if you use a dynamic design.

to adjust on screens of small mobile devices col-xs-* is used
for tablets is col-sm-* .
for screens with a resolution greater than or equal to 996 px col-md-* is used
for% co screens from% onwards use 1200 px

Replacing the col-lg-* with the numbering of * . In the same way here is the documentation of Bootstrap in the grid system section