CODEWITHSUNDEEP
htmlcssbootstrap-4
Kyle
Kyle

Reputation: 735

HTML bootstrap form fields alignment

I have a pretty big form so numerous fields throughout the wizard have the same problem. The checkbox under 'contact telephone number' causes the rest of the content to be pushed out of line. enter image description here

I have tried setting the margin-bottom to 0 which does minimize the gap but it is still 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>

If I remove the <br> the checkbox is placed on the same line as the label.

I have also tried adding a placeholder underneath the contact name field like this: 

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

However that looks pretty poor enter image description here

What would be the best way to go about keeping all of the fields aligned?

Upvotes: 0

Views: 285

Answers (2)

djibe
djibe

Reputation: 3038

Or you can use Bootstrap grid :

<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>Bootstrap 4 - HTML bootstrap form fields alignment</h1>
        <p class="lead">by djibe.</p>
        <p class="text-muted">(thx to BS4)</p>
        <p>
          Answer to a question 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>

Upvotes: 0

Ballsigno
Ballsigno

Reputation: 501

I assumed this is a very usual pattern.
If you want to keep the same align from that format, I think just add d-flex align-items-XXX is an easy way.(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>

Upvotes: 2

Related Questions