Form space the input box - html

Question

Hi i would like some help on how to space my name, email, contact, address input box to match the spacing for description as below in my picture. Please ignore my same class id i use below for my code as i am testing
here is the code for my form
<form>
<div class="form-group row">
<label for="inputName" class="col-form-label" style="padding-left: 20px; ">Name: </label>
<div class="col-sm-5">
<input type="Name" class="form-control" id="inputEmail3" placeholder="Name" >
</div>
</div>
<div class="form-group row">
<label for="inputEmail3" class="col-form-label" style="padding-left: 22px;">Email: </label>
<div class="col-sm-5">
<input type="inputEmail3" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group row">
<label for="inputEmail3" class="col-form-label" style="padding-left: 22px;">Contact: </label>
<div class="col-sm-5">
<input type="inputEmail3" class="form-control" id="inputEmail3" placeholder="Contact">
</div>
</div>
<div class="form-group row">
<label for="inputEmail3" class="col-form-label" style="padding-left: 22px;">Address: </label>
<div class="col-sm-5">
<input type="inputEmail3" class="form-control" id="inputEmail3" placeholder="Address">
</div>
</div>
<div class="form-group row">
<label for="inputEmail3" class="col-form-label" style="padding-left: 22px;">Description: </label>
<div class="col-sm-5">
<input type="inputEmail3" class="form-control" id="inputEmail3" placeholder="Description...">
</div>
</div>
</form>

Answer 1

Perhaps it would help you if you use Bootstrap form builder to achieve this.
Here is a my code:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<form>
<div class="form-group row">
<label for="name" class="col-2 col-form-label">Name:</label>
<div class="col-10">
<input id="name" name="name" placeholder="Name" type="text" class="form-control">
</div>
</div>
<div class="form-group row">
<label for="email" class="col-2 col-form-label">Email:</label>
<div class="col-10">
<input id="email" name="email" placeholder="Email" type="text" class="form-control">
</div>
</div>
<div class="form-group row">
<label for="contact" class="col-2 col-form-label">Contact:</label>
<div class="col-10">
<input id="contact" name="contact" placeholder="Contact" type="text" class="form-control">
</div>
</div>
<div class="form-group row">
<label for="address" class="col-2 col-form-label">Address:</label>
<div class="col-10">
<input id="address" name="address" placeholder="Address" type="text" class="form-control">
</div>
</div>
<div class="form-group row">
<label for="description" class="col-2 col-form-label">Description:</label>
<div class="col-10">
<input id="description" name="description" placeholder="Description" type="text" class="form-control">
</div>
</div>
<div class="form-group row">
<div class="offset-2 col-10">
<button name="submit" type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
Or code pen

Answer 2

A possible solution in which you can achieve a uniformity (with align), is by adding a class to the labels that define a min-width that is equal to the width of the Description label.
This will force the shorter labels to have the same width at a minimum as the long label, and aligning them to the right will center them against the input elements.
For example:
.my-form-label {
min-width: 7rem;
text-align:right;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<div class='container'>
<form>
<div class="form-group row">
<label for="inputName" class="col-form-label my-form-label" style="padding-left: 20px; ">Name: </label>
<div class="col-sm-5">
<input type="Name" class="form-control" id="inputEmail3" placeholder="Name" >
</div>
</div>
<div class="form-group row">
<label for="inputEmail3" class="col-form-label my-form-label" style="padding-left: 22px;">Email: </label>
<div class="col-sm-5">
<input type="inputEmail3" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group row">
<label for="inputEmail3" class="col-form-label my-form-label" style="padding-left: 22px;">Contact: </label>
<div class="col-sm-5">
<input type="inputEmail3" class="form-control" id="inputEmail3" placeholder="Contact">
</div>
</div>
<div class="form-group row">
<label for="inputEmail3" class="col-form-label my-form-label" style="padding-left: 22px;">Address: </label>
<div class="col-sm-5">
<input type="inputEmail3" class="form-control" id="inputEmail3" placeholder="Address">
</div>
</div>
<div class="form-group row">
<label for="inputEmail3" class="col-form-label my-form-label" style="padding-left: 22px;">Description: </label>
<div class="col-sm-5">
<input type="inputEmail3" class="form-control" id="inputEmail3" placeholder="Description...">
</div>
</div>
</form>
</div>

Answer 3

You should add a col value to your label. Here, I use col-2 so the input can be included in the rest of the row.
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<form>
<div class="form-group row my-3">
<label for="inputName" class="col-2 col-form-label"> Name:</label>
<input class="col-sm-5" type="Name" class="form-control" id="inputEmail3"
placeholder="Name">
</div>
<div class="form-group row my-3">
<label for="inputEmail3" class="col-2 col-form-label ">Email:</label>
<input class="col-sm-5" type="inputEmail3" class="form-control" id="inputEmail3"
placeholder="Email">
</div>
<div class="form-group row my-3">
<label for="inputEmail3" class="col-2 col-form-label ">Contact:</label>
<input class="col-sm-5" type="inputEmail3" class="form-control" id="inputEmail3"
placeholder="Contact">
</div>
<div class="form-group row my-3">
<label for="inputEmail3" class="col-2 col-form-label ">Address:</label>
<input class="col-sm-5" type="inputEmail3" class="form-control" id="inputEmail3"
placeholder="Address">
</div>
<div class="form-group row my-3">
<label for="inputEmail3" class="col-2 col-form-label ">Description:</label>
<input class="col-sm-5" type="inputEmail3" class="form-control" id="inputEmail3"
placeholder="Description...">
</div>
</form>