What causes the bootstrap grid system to deviate from the intended column sizes?

Question

What causes the bootstrap grid system to deviate from the intended column sizes?

Here is the alignment I am aiming for with the Phone and Extension fields in the form:

https://i.sstatic.net/JRmDU.png

This is the code snippet I have written 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>

Here is how it is beginning to look like:

https://i.sstatic.net/EhZvX.png

Or possibly like this:

https://i.sstatic.net/b0jRG.png

I am not sure what structure would make it work correctly. Any suggestions?

For example, the Email section above it that is functioning properly follows this format:

            <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>

html css twitter-bootstrap twitter-bootstrap-3

Answer 1

Answer №1

Since you are utilizing solely col-md-* which caters to medium-sized devices, it is recommended to also incorporate col-sm-* (for small devices) or even col-xs-* (for extra-small devices).

However, I would suggest referring to the Forms Bootstrap Documentation because your form appears quite complex and employing .col- may not be necessary at all.

Refer to a basic demo from the documentation:

<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>

Answer 2

Since you are utilizing solely col-md-* which caters to medium-sized devices, it is recommended to also incorporate col-sm-* (for small devices) or even col-xs-* (for extra-small devices).

However, I would suggest referring to the Forms Bootstrap Documentation because your form appears quite complex and employing .col- may not be necessary at all.

Refer to a basic demo from the documentation:

<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>

Answer 3

Answer №2

Avoid the need for using pull-right.

To better understand, refer to the documentation at http://getbootstrap.com/css/#forms

The documentation explains how the formgroup container resets the column count.

Follow the structure outlined in 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 wish to maintain the same layout on mobile devices, consider using col-xs-* or col-sm-* instead of col-md-* for defining column sizes.

For a visual example, view this link: https://jsfiddle.net/gusmgewg/

Answer 4

Avoid the need for using pull-right.

To better understand, refer to the documentation at http://getbootstrap.com/css/#forms

The documentation explains how the formgroup container resets the column count.

Follow the structure outlined in 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 wish to maintain the same layout on mobile devices, consider using col-xs-* or col-sm-* instead of col-md-* for defining column sizes.

For a visual example, view this link: https://jsfiddle.net/gusmgewg/

What causes the bootstrap grid system to deviate from the intended column sizes?

Answer №1

Answer №2

Similar questions

Updating part of a page while also changing the navigation

Transforming data from an HTML form into a PDF document - Tips for generating multiple outputs

What is the best way to display and conceal various elements with each individual click?

Using JQuery to load a table and inject it with html()

Items are overflowing the flex container, exceeding its boundaries

What could be causing the AngularUI bootstrap datepicker to not appear?

Calculating the dimensions of a CSS element based on its content

Implementing HTML tags in C# code

What is the best way to populate a select input field with options using JavaScript?

Combining multiple images into one CSS image sprite to create 4 clickable

Material UI - Utilizing multiple CSS classes within a unified global theme

Using jQuery and Modernizr for CSS3 and Javascript transitions support in Internet Explorer

Scrolling through menus horizontally

Is it possible to prevent a webpage from being refreshed?

Creating a box that is connected by lines using JSON data requires several steps. You

Linear gradient background issue not functioning properly when transitioning between screens using Next.js

Lines running horizontally on either side of the text

using `clear: both` does not stop text from wrapping

Struggling to create a drop-down box with CSS and not achieving the expected results

JS unable to insert new row in table