I’m trying to create an input form.
The first row contain a column,
The second row contain 2 column,
the third row contain 3 column.
There are label and input in each column
When i try to create the form, the start of the input is different from each row.
Try to use align-self-center order-2 but it’s not working
Source Code
<div class="row mt-3">
<div class="col-md-12">
<div class="row mb-3">
<div class="col-md-2 col-xs-2">
<label for="Nationality" class="required control-label col-form-label">Nationality</label>
</div>
<div class="col-md-10 col-xs-10 align-self-center order-2">
<input type="text" class="form-control" name="Nationality" id="Nationality" >
</div>
</div>
</div>
</div>
<div class="row justify-content-center mt-3 align-items-center">
<div class="col-md-6">
<div class="row mb-3 justify-content-center">
<div class="col-md-5 col-xs-5">
<label for="maritalStatus" class="required control-label col-form-label">maritalStatus</label>
</div>
<div class="col-md-7 col-xs-7">
<select class="form-control selecting" id="maritalStatus" name="maritalStatus">
<option value=""></option>
<option value="a">a</option>
<option value="b">b</option>
</select>
</div>
</div>
</div>
<div class="col-md-6">
<div class="row mb-3 justify-content-center">
<div class="col-md-5 col-xs-5">
<label for="education" class="required control-label col-form-label">Educaiton</label>
</div>
<div class="col-md-7 col-xs-7">
<select class="form-control selecting" id="education" name="education">
<option value=""></option>
<option value="a">a</option>
<option value="b">b</option>
</select>
</div>
</div>
</div>
</div>
<div class="row justify-content-center mt-3 align-items-center">
<div class="col-md-4">
<div class="row mb-3 justify-content-center">
<div class="col-md-5 col-xs-5">
<label for="GHI" class="required control-label col-form-label">GHI</label>
</div>
<div class="col-md-7 col-xs-7">
<select class="form-control selecting" id="GHI" name="GHI">
<option value=""></option>
<option value="a">a</option>
<option value="b">b</option>
</select>
</div>
</div>
</div>
<div class="col-md-4">
<div class="row mb-3 justify-content-center">
<div class="col-md-5 col-xs-5">
<label for="DEF" class="required control-label col-form-label">DEF</label>
</div>
<div class="col-md-7 col-xs-7">
<select class="form-control selecting" id="DEF" name="DEF">
<option value=""></option>
<option value="a">a</option>
<option value="b">b</option>
</select>
</div>
</div>
</div>
<div class="col-md-4">
<div class="row mb-3 justify-content-center">
<div class="col-md-5 col-xs-5">
<label for="ABC" class="required control-label col-form-label">ABC</label>
</div>
<div class="col-md-7 col-xs-7">
<select class="form-control selecting" id="ABC" name="ABC">
<option value=""></option>
<option value="a">a</option>
<option value="b">b</option>
</select>
</div>
</div>
</div>
</div>
The Result
From the below code, how can i make the start of input of each row is vertically align and make it looks better ? Is there any way just use classes from bootstrap to support it?
2
Answers
Here You will need to add all column in one row and use Column breaks. & then, Add same column width for all label column (For ex:
col-md-2). as Setting one column widthText align right for Label …. more better looks- example below:
Add one more div with wrapper class as a parent div. also add flex alignment classes for vertical and horizontal alignment. give ‘height: 100vh;’ in wrapper class like below code.
.wrapper {height: 100vh;}