Aligning form fields in a HTML form using Bootstrap

Question

Aligning form fields in a HTML form using Bootstrap

In my extensive form, several fields within the setup encounter the same issue. Specifically, a checkbox below 'contact telephone number' causes the surrounding content to become misaligned. https://i.sstatic.net/8qI8Z.png

My attempts to resolve this by setting margin-bottom to 0 have only slightly reduced the gap but it remains noticeable.

<div class="form-group">
    <label for="contact_tel" style="margin: 0">Contact Telephone Number <span style="color:red;">*</span></label>
    <small style="margin: 0"><br>Same as your main telephone number?</small>
    <input type="checkbox" name="sameNum">
    <input type="text" class="form-control input-sm"/>
</div>

Removing the <br> places the checkbox on the same line as the label.

I've also tried inserting a placeholder beneath the contact name field like so:

 <small><br>&nbsp;</small>

However, this solution looks quite unsightly https://i.sstatic.net/Rshp8.png

What is the most effective approach to ensure all fields remain properly aligned in the form?

html css bootstrap-4

Answer 1

Answer №1

I came across what seems to be a common pattern.
To maintain the same alignment as that format, simply including d-flex align-items-XXX is an effortless solution.(using flex)

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<form>
  <div class="form-row d-flex align-items-end">
    <div class="form-group col-6" style="background-color: #F6CEE3;">
      <label for="test1">Test1</label>
      <input type="text" class="form-control " id="test1" placeholder="test1">
    </div>
    <div class="form-group col-6"  style="background-color: #A9E2F3;">
      <label for="contact_tel" style="margin: 0">Contact Telephone Number <span style="color:red;">*</span></label>
      <small style="margin: 0"><br>Same as your main telephone number?</small>
      <input type="checkbox" name="sameNum">
      <input type="text" class="form-control input-sm"/>
    </div>
  </div>
  <div class="form-row d-flex align-items-start">
    <div class="form-group col-6" style="background-color: #F6CEE3;">
      <label for="test2">Test2</label>
      <input type="text" class="form-control " id="test2" placeholder="test2">
    </div>
    <div class="form-group col-6"  style="background-color: #A9E2F3;">
      <label for="test3">test3</label>
      <input type="text" id="test3" class="form-control input-sm" placeholder="test3"/>
      <input type="checkbox" name="sameNum">          
      <label for="contact_tel" style="margin: 0">Contact Telephone Number <span style="color:red;">*</span></label>
      <small style="margin: 0"><br>Same as your main telephone number?</small>
    </div>
  </div>
</form>

Answer 2

I came across what seems to be a common pattern.
To maintain the same alignment as that format, simply including d-flex align-items-XXX is an effortless solution.(using flex)

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<form>
  <div class="form-row d-flex align-items-end">
    <div class="form-group col-6" style="background-color: #F6CEE3;">
      <label for="test1">Test1</label>
      <input type="text" class="form-control " id="test1" placeholder="test1">
    </div>
    <div class="form-group col-6"  style="background-color: #A9E2F3;">
      <label for="contact_tel" style="margin: 0">Contact Telephone Number <span style="color:red;">*</span></label>
      <small style="margin: 0"><br>Same as your main telephone number?</small>
      <input type="checkbox" name="sameNum">
      <input type="text" class="form-control input-sm"/>
    </div>
  </div>
  <div class="form-row d-flex align-items-start">
    <div class="form-group col-6" style="background-color: #F6CEE3;">
      <label for="test2">Test2</label>
      <input type="text" class="form-control " id="test2" placeholder="test2">
    </div>
    <div class="form-group col-6"  style="background-color: #A9E2F3;">
      <label for="test3">test3</label>
      <input type="text" id="test3" class="form-control input-sm" placeholder="test3"/>
      <input type="checkbox" name="sameNum">          
      <label for="contact_tel" style="margin: 0">Contact Telephone Number <span style="color:red;">*</span></label>
      <small style="margin: 0"><br>Same as your main telephone number?</small>
    </div>
  </div>
</form>

Answer 3

Answer №2

Alternatively, you have the option to utilize the Bootstrap grid system:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<div class="container">
  <div class="row my-4">
    <div class="col">
      <div class="jumbotron">
        <h1>Customizing HTML form field alignment with Bootstrap 4</h1>
        <p class="lead">by djibe.</p>
        <p class="text-muted">(thanks to BS4)</p>
        <p>
          Find the answer on Stackoverflow: <a href="https://stackoverflow.com/questions/51632452/html-bootstrap-form-fields-alignment" target="_blank">https://stackoverflow.com/questions/51632452/html-bootstrap-form-fields-alignment</a>
        </p>
        <h2>
          Tutorial
        </h2>
        <h2>
          Demo
        </h2>
        <div class="row">
          <div class="col-sm d-flex flex-column">
            <div class="form-group d-flex flex-column flex-fill justify-content-between">
              <label for="contactname">Contact Name <span class="text-danger">*</span></label>
              <input type="text" class="form-control" id="contactname">
            </div>
          </div>
          <div class="col-sm">
            <div class="form-group">
              <label for="contact-tel">Contact Telephone Number <span class="text-danger">*</span></label>
              <div class="custom-control custom-checkbox">
                <input type="checkbox" class="custom-control-input" id="customCheck1">
                <label class="custom-control-label mb-1" for="customCheck1">Same as Main Telephone Number</label>
              </div>
              <input type="text" class="form-control" id="contact-tel">
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-sm">
            <div class="form-group">
              <label for="contact-position">Contact Position <span class="text-danger">*</span></label>
              <input type="text" class="form-control" id="contact-position">
            </div>
          </div>
          <div class="col-sm">
            <div class="form-group">
               <label for="contact-2">Accounts Contact Name <span class="text-danger">*</span></label>
              <input type="text" class="form-control" id="contact-2">
            </div>
          </div>
        </div>

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

Answer 4

Alternatively, you have the option to utilize the Bootstrap grid system:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<div class="container">
  <div class="row my-4">
    <div class="col">
      <div class="jumbotron">
        <h1>Customizing HTML form field alignment with Bootstrap 4</h1>
        <p class="lead">by djibe.</p>
        <p class="text-muted">(thanks to BS4)</p>
        <p>
          Find the answer on Stackoverflow: <a href="https://stackoverflow.com/questions/51632452/html-bootstrap-form-fields-alignment" target="_blank">https://stackoverflow.com/questions/51632452/html-bootstrap-form-fields-alignment</a>
        </p>
        <h2>
          Tutorial
        </h2>
        <h2>
          Demo
        </h2>
        <div class="row">
          <div class="col-sm d-flex flex-column">
            <div class="form-group d-flex flex-column flex-fill justify-content-between">
              <label for="contactname">Contact Name <span class="text-danger">*</span></label>
              <input type="text" class="form-control" id="contactname">
            </div>
          </div>
          <div class="col-sm">
            <div class="form-group">
              <label for="contact-tel">Contact Telephone Number <span class="text-danger">*</span></label>
              <div class="custom-control custom-checkbox">
                <input type="checkbox" class="custom-control-input" id="customCheck1">
                <label class="custom-control-label mb-1" for="customCheck1">Same as Main Telephone Number</label>
              </div>
              <input type="text" class="form-control" id="contact-tel">
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-sm">
            <div class="form-group">
              <label for="contact-position">Contact Position <span class="text-danger">*</span></label>
              <input type="text" class="form-control" id="contact-position">
            </div>
          </div>
          <div class="col-sm">
            <div class="form-group">
               <label for="contact-2">Accounts Contact Name <span class="text-danger">*</span></label>
              <input type="text" class="form-control" id="contact-2">
            </div>
          </div>
        </div>

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

Aligning form fields in a HTML form using Bootstrap

Answer №1

Answer №2

Similar questions

Challenges encountered with the navigation bar in Bootstrap 4

Can a low-opacity gradient be merged with a solid background color?

Issue with grid breakpoints for medium-sized columns and grid rows not functioning as expected

What causes my divs to change position when using text <h1>?

Make multiple images in one row resize proportionally instead of wrapping them to the next line

spontaneous angular rotations in a constantly shifting CSS environment

Hover events in the browser are currently operating at a sluggish pace

Utilize Python to extract a table from an HTML document

Every time I attempt to load the table, I encounter an error

What is the process of Defining an Element Based on Two Attributes in C#?

Ways to ensure the menu remains fixed on a fluid website

Rotate each row of the table in sequence with a pause between each flip

Graphic aligned with textual content

Tooltips experience issues when interacting with elements that do not utilize the :active state

jQuery's event delegation feature fails to work in conjunction with AJAX requests

Tips for aligning 2 divs in the same position?

What should be displayed if there are no search results?

Switch the orientation of the unordered list from horizontal to vertical in a dynamic way

Numerous slideshows using identical scripts

Is it possible to make side elements expand to occupy the remaining screen space beyond the container?