How to vertically align input fields that has different length of labels in bootstrap 4.3.1?

Question

I have the following sample code:

<!doctype html>
<html>

  <head>
    <meta charset="utf-8">
    <title>Bootstrap Example</title>
  </head>

  <body>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>

    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

    <div class="container">
      <div class="row">
        <div class="col">
          <div class="input-group mb-3">
            <div class="input-group-prepend">
              <span class="input-group-text" id="inputGroup-sizing-default">First Field</span>
            </div>
            <input type="text" class="form-control" aria-label="First Field" aria-describedby="inputGroup-sizing-default">
          </div>

          <div class="input-group mb-3">
            <div class="input-group-prepend">
              <span class="input-group-text" id="inputGroup-sizing-default">Second Field</span>
            </div>
            <input type="text" class="form-control" aria-label="Second Field" aria-describedby="inputGroup-sizing-default">
          </div>
        </div>
      </div>
    </div>
  </body>

</html>

https://jsfiddle.net/tjub0g7m/

My Question:

How to align the input fields vertically in order for them to become easier to read? Please check the image below for more details.

Your help will be greatly appreciated.

Answer 1

You can use min width

 .input-group-text{ min-width:120px; }

 <!doctype html> <html> <head> <meta charset="utf-8"> <title>Bootstrap Example</title> </head> <body> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> <div class="container"> <div class="row"> <div class="col"> <div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text" id="inputGroup-sizing-default">First Field</span> </div> <input type="text" class="form-control" aria-label="First Field" aria-describedby="inputGroup-sizing-default"> </div> <div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text" id="inputGroup-sizing-default">Second Field</span> </div> <input type="text" class="form-control" aria-label="Second Field" aria-describedby="inputGroup-sizing-default"> </div> </div> </div> </div> </body> </html>

How to vertically align input fields that has different length of labels in bootstrap 4.3.1?

Question

1 answers

solution1
3 ACCPTED 2019-06-06 05:27:05

How to vertically align input fields that has different length of labels in bootstrap 4.3.1?

Question

1 answers

solution1 3 ACCPTED 2019-06-06 05:27:05

solution1
3 ACCPTED 2019-06-06 05:27:05