CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
Bohn
Bohn

Reputation: 26919

Why bootstrap grid system is not following the column sizes

That's how I want the Phone and Extension to align in the form

enter image description here

That's what I wrote for the Phone and Extension row:

            <div class="row form-group">
                <label class="control-label col-md-2" for="phone">Phone</label>
                <div class="col-md-6">
                    <input class="col-md-5" id="AdminPhone" name="AdminPhone" type="text" value="" placeholder="(999) 999-9999">
                    <div class="form-group col-md-7 pull-right">
                        <label class="control-label  col-md-1" style="text-align: right" for="AdminExt">Ext</label>
                        <input class="col-md-6 pull-right" id="AdminExt" name="AdminExt" type="text" value="" placeholder="1234">
                    </div>
                </div>
            </div>

And that's how it start to look like

enter image description here

or like this:

enter image description here

I don't know how else should I have structured it to work right?

Also for example the Email section above it which works fine is like this:

            <div class="row form-group">
                <label class="control-label col-md-2" for="Email">Email</label>
                <div class="col-md-6">
                    <input id="AdminEmail" name="AdminEmail" type="text" value="" style="width: 100%" placeholder="Email">
                    <span class="glyphicon glyphicon-envelope  form-control-feedback" style="right: 10px; line-height: 27px; color: lightblue"></span>
                </div>

                <div class="col-md-4">
                    <div>
                        <input class="checkbox-inline" id="ShowAdminPhone" name="ShowAdminPhone" type="checkbox" value="true"><input name="ShowAdminPhone" type="hidden" value="false">
                        <label class="control-label" for="Show_Admin_phone">Show Admin phone</label>
                    </div>
                </div>
            </div>

Upvotes: 0

Views: 147

Answers (2)

dippas
dippas

Reputation: 60563

Because you are using only col-md-* which is for medium devices, you have to use as well col-sm-* (for small devices), or even col-xs-* (for extra small devices)

However, I would advise you to take a look at the Forms Bootstrap Docs because your form is very complicated, and there is no need to use .col- at all.

Take a look at a basic demo from Docs:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" id="exampleInputFile">
    <p class="help-block">Example block-level help text here.</p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Check me out
    </label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

Upvotes: 1

Sem
Sem

Reputation: 4669

No need to use pull-right.

http://getbootstrap.com/css/#forms

If you look at the documentation, it shows the formgroup container resets the column counting.

Do apply the same structure as the documentation:

<div class="row">
  <form class="form-horizontal">
    <div class="form-group col-md-6">
      <label class="control-label col-md-2">test</label>
      <div class="col-md-10">
        <input class="form-control" type="text">
      </div>
    </div>
    <div class="form-group col-md-6">
      <label class="control-label col-md-2">test</label>
      <div class="col-md-10">
        <input class="form-control" type="text">
      </div>
    </div>
  </form>
</div>

If you want the same structure for mobile devices, you should use either col-xs-* or col-sm-* instead of col-md-* for measuring your columns.

Example: https://jsfiddle.net/gusmgewg/

Upvotes: 0

Related Questions