Revision history [back]

To align inputs vertically in different rows with Bootstrap 5, you can use the align-items-start class on the parent container. This will align the inputs at the top of their respective columns, even if they are in different rows. Here is an example HTML code:

<div class="container">
  <div class="row align-items-start">
    <div class="col-md-6">
      <label for="input1" class="form-label">Input 1</label>
      <input type="text" class="form-control" id="input1">
    </div>
    <div class="col-md-6">
      <label for="input2" class="form-label">Input 2</label>
      <input type="text" class="form-control" id="input2">
    </div>
  </div>
  <div class="row align-items-start">
    <div class="col-md-6">
      <label for="input3" class="form-label">Input 3</label>
      <input type="text" class="form-control" id="input3">
    </div>
    <div class="col-md-6">
      <label for="input4" class="form-label">Input 4</label>
      <input type="text" class="form-control" id="input4">
    </div>
  </div>
</div>

In this example, the align-items-start class is added to both row elements to align the inputs at the top of their columns. You can adjust the column sizes using the col- classes to fit your design needs.