How to align nested form rows using Bootstrap 4?

Question

I have a nested form row and want to align the form fields vertically. The output currently is this:

Code is here:

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
 
 <div class="card">
      <div class="card-body">
    
        <div class="form-group row">
          <label for="name" class="col-sm-3 col-form-label">Name</label>
          <div class="col-sm-9">
            <input type="text" class="form-control" id="name" disabled>
          </div>
        </div>
        <div class="form-group row">
          <label for="description" class="col-sm-3 col-form-label">Description</label>
          <div class="col-sm-9">
            <textarea class="form-control" id="description" rows="5" disabled></textarea>
          </div>
        </div>
        
        <div class="form-group row">
          <div class="col-sm-7">
            <div class="form-group row">
              <label for="description" class="col-sm-5 col-form-label">Rate</label>
              <div class="col-sm-7">
                <input type="text" class="form-control">
              </div>
            </div>
            <div class="form-group row">
              <label for="description" class="col-sm-5 col-form-label">Start date</label>
              <div class="col-sm-7">
                <input type="text" class="form-control">
              </div>
            </div>
            <div class="form-group row">
              <label for="description" class="col-sm-5 col-form-label">End date</label>
              <div class="col-sm-7">
                <input type="text" class="form-control">
              </div>
            </div>
          </div>
          
          <div class="col-sm-5">
            <div class="promotion-image-container">
              <img src="https://via.placeholder.com/300x200" class="img-thumbnail">
            </div>
          </div>
        </div>
        
      </div>
    </div>

As you can see there is a slight misalignment in the columns. I have an image that I want to align with the other 3 fields.

I tried adjusting the column numbers but I can't make it align properly.

Answer 1

The problem is that the <label> elmenets do not have the same width. You have used .col-sm-3 on the first two and .col-ms-5 on the last three. Even if you use the same .col-* on all of them, still they would have different width since the last three are nested. (Check the first code snippet)

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<div class="card">
  <div class="card-body">

    <div class="form-group row">
      <label for="name" class="col-sm-3 col-form-label bg-danger">Name</label>
      <div class="col-sm-9">
        <input type="text" class="form-control" id="name" disabled>
      </div>
    </div>
    <div class="form-group row">
      <label for="description" class="col-sm-3 col-form-label bg-danger">Description</label>
      <div class="col-sm-9">
        <textarea class="form-control" id="description" rows="5" disabled></textarea>
      </div>
    </div>

    <div class="form-group row">
      <div class="col-sm-7">
        <div class="form-group row">
          <label for="description" class="col-sm-5 col-form-label bg-danger">Rate</label>
          <div class="col-sm-7">
            <input type="text" class="form-control">
          </div>
        </div>
        <div class="form-group row">
          <label for="description" class="col-sm-5 col-form-label bg-danger">Start date</label>
          <div class="col-sm-7">
            <input type="text" class="form-control">
          </div>
        </div>
        <div class="form-group row">
          <label for="description" class="col-sm-5 col-form-label bg-danger">End date</label>
          <div class="col-sm-7">
            <input type="text" class="form-control">
          </div>
        </div>
      </div>

      <div class="col-sm-5">
        <div class="promotion-image-container">
          <img src="https://via.placeholder.com/300x200" class="img-thumbnail">
        </div>
      </div>
    </div>
  </div>
</div>

---

My suggetion is to use a container for each one of the <label> elmements and apply .col-sm-auto and .col-12 directly on the container. Then, set a fixed width for the <label> so that they all have the same width. You can use media queries to set different width based on the viewport size.

Use .col-sm on the <input> and <textarea> container so that they take all the available space. Use .col-12 on them for mobile.

@media (min-width: 576px) {
  label {
    width: 200px !important;
  }
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<div class="card">
  <div class="card-body">
    <div class="form-group row">
      <div class="col-12 col-sm-auto bg-primary">
        <label for="name" class="col-form-label">Name</label>
      </div>
      <div class="col-sm col-12">
        <input type="text" class="form-control" id="name" disabled>
      </div>
    </div>
    <div class="form-group row">
      <div class="col-12 col-sm-auto bg-primary">
        <label for="description" class="col-form-label">Description</label>
      </div>
      <div class="col-12 col-sm">
        <textarea class="form-control" id="description" rows="5" disabled></textarea>
      </div>
    </div>

    <div class="form-group row">
      <div class="col-12 col-sm-7">
        <div class="form-group row">
          <div class="col-12 col-sm-auto bg-primary ">
            <label for="description" class="col-form-label">Rate</label>
          </div>
          <div class="col-12 col-sm">
            <input type="text" class="form-control">
          </div>
        </div>
        <div class="form-group row">
          <div class="col-12 col-sm-auto bg-primary">
            <label for="description" class="col-form-label">Start date</label>
          </div>
          <div class="col-12 col-sm">
            <input type="text" class="form-control">
          </div>
        </div>
        <div class="form-group row">
          <div class="col-12 col-sm-auto bg-primary">
            <label for="description" class="col-form-label ">End date</label>
          </div>
          <div class="col-12 col-sm">
            <input type="text" class="form-control">
          </div>
        </div>
      </div>

      <div class="co-12 col-sm-5">
        <div class="promotion-image-container">
          <img src="https://via.placeholder.com/300x200" class="img-thumbnail">
        </div>
      </div>
    </div>
  </div>
</div>

https://codepen.io/anon/pen/RzMzpR

Answer 2

Just added custom style padding-left:24px !important for div class='col-sm-7 padd-left' it will be work's

@media only screen and (min-width: 768px) {
  .padd-left{
      padding-left:24px !important
  }
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  
  <div class="card">
  <div class="card-body">

    <div class="form-group row">
      <label for="name" class="col-sm-3 col-form-label">Name</label>
      <div class="col-sm-9">
        <input type="text" class="form-control" id="name" disabled>
      </div>
    </div>
    <div class="form-group row">
      <label for="description" class="col-sm-3 col-form-label">Description</label>
      <div class="col-sm-9">
        <textarea class="form-control" id="description" rows="5" disabled></textarea>
      </div>
    </div>

    <div class="form-group row">
      <div class="col-sm-7">
        <div class="form-group row">
          <label for="description" class="col-sm-5 col-form-label">Rate</label>
          <div class="col-sm-7 padd-left">
            <input type="text" class="form-control">
          </div>
        </div>
        <div class="form-group row">
          <label for="description" class="col-sm-5 col-form-label">Start date</label>
          <div class="col-sm-7 padd-left">
            <input type="text" class="form-control">
          </div>
        </div>
        <div class="form-group row">
          <label for="description" class="col-sm-5 col-form-label">End date</label>
          <div class="col-sm-7 padd-left">
            <input type="text" class="form-control">
          </div>
        </div>
      </div>

      <div class="col-sm-5">
        <div class="promotion-image-container">
          <img src="https://via.placeholder.com/300x200" class="img-thumbnail">
        </div>
      </div>
    </div>

  </div>
</div>

Answer 3

Can you try my code. I modified some line code:

<div class="card">
    <div class="card-body">
        <div class="form-group row">
            <label for="name" class="col-sm-3 col-form-label">Name</label>
            <div class="col-sm-9">
                <input type="text" class="form-control" id="name" disabled>
            </div>
        </div>
        <div class="form-group row">
            <label for="description" class="col-sm-3 col-form-label">Description</label>
            <div class="col-sm-9">
                <textarea class="form-control" id="description" rows="5" disabled></textarea>
            </div>
        </div>
        <div class="form-group row">
            <div class='col-3'>
                <div class="form-group"><label for="description" class="col-form-label">Rate</label></div>
                <div class="form-group"><label for="description" class="col-form-label">Start date</label></div>
                <div class="form-group">
                    <label for="description" class="col-form-label">End date</label>
                </div>
            </div>
            <div class='col-4'>
                <div class="form-group">
                    <input type="text" class="form-control">
                </div>
                <div class="form-group">
                    <input type="text" class="form-control datepicker">
                </div>
                <div class="form-group">
                    <input type="text" class="form-control datepicker">
                </div>
            </div>
            <div class='col-5'>
                <div class="promotion-image-container">
                    <img src="https://via.placeholder.com/300x200" class="img-thumbnail">
                </div>
            </div>
        </div>
    </div>
</div>

This is a demo link: https://codepen.io/phuongnm153/pen/zVWevP