Bootstrap nested column border issue - html

Question

I am using bootstrap 4 grid system and I have a layout like the image above, the issue I am getting is the border is not aligned at the bottom row.
Since I am using nested columns in (first and second row) which are eventually four columns. But at the last row I have two columns. I need last row border to match with the above row.
Please help. Thanks
Fiddle Link
<div class="container mt-3">
<div class="row">
<div class="col-12">
<div class="row">
<div class="col-7 border">
<div class="row">
<label for="adf_bd_nationality" class="bg-gray-light d-flex border-right border-bottom-0 align-items-center col-7 col-form-label text-black col-form-label-sm">Registration (Tail No.)</label>
<div class="col-5 bg-white">
<input class="form-control" />
</div>
</div>
</div>
<div class="col-5 bg-white border border-md-left-0 ">
<div class="row">
<label for="adf_bd_serialNo" class="bg-gray-light d-flex border-md-right border-right border-bottom-0 border-top-0 align-items-center col-6 col-form-label text-black col-form-label-sm">Serial No.</label>
<div class="col-6">
<input type="text" class="form-control text-black text-center " id="adf_bd_serialNo" name="adf_bd_serialNo" onkeypress="return /[0-9a-zA-Z]/i.test(event.key)" maxlength="10">
</div>
</div>
</div>
</div>
</div>
<div class="col-12">
<div class="row">
<div class="col-7 border border-top-0 ">
<div class="row">
<label for="adf_bd_manufacturer" class="bg-gray-light d-flex border-right border-md-bottom-0 align-items-center col-7 col-form-label text-black col-form-label-sm">Manufacturer</label>
<div class="col-5 bg-white">
<select name="adf_bd_manufacturer" id="adf_bd_manufacturer" class="my-select form-control">
<option value="" class="bg-black">Select</option>
<option value="Airbus" class="bg-black">Airbus</option>
<option value="Boeing" class="bg-black">Boeing</option>
<option value="Bombardier" class="bg-black">Bombardier</option>
<option value="Embraer" class="bg-black">Embraer</option>
<option value="McDonnell Douglas" class="bg-black">McDonnell Douglas</option>
<option value="Tupoloev" class="bg-black">Tupoloev</option>
<option value="Cessna" class="bg-black">Cessna</option>
<option value="Cirrus Design" class="bg-black">Cirrus Design</option>
<option value="Diamond" class="bg-black">Diamond</option>
<option value="Mooney" class="bg-black">Mooney</option>
<option value="Piper" class="bg-black">Piper</option>
</select>
</div>
</div>
</div>
<div class="col-5 bg-white border border-top-0 border-md-left-0 ">
<div class="row">
<label for="adf_bd_ICAO" class="bg-gray-light d-flex border border-md-right border-bottom-0 border-md-bottom-0 border-top-0 border-left-0 align-items-center col-6 col-form-label text-black col-form-label-sm">Type ICAO</label>
<div class="col-6 ">
<input type="text" class="form-control text-black text-center" id="adf_bd_ICAO" name="adf_bd_ICAO" data-inputmask="'regex': '[a-zA-Z0-9]', 'repeat': 4, 'placeholder': ''" autocomplete="off" inputmode="text">
</div>
</div>
</div>
</div>
</div>
<div class="col-12">
<div class="row border border-top-0 ">
<label for="adf_bd_engineTypes" class="bg-gray-light d-flex border-right border-bottom-0 border-bottom align-items-center col-4 col-form-label text-black col-form-label-sm" style="">Engine Type(s)</label>
<div class="col-8 adf_bd_engineTypesCon bg-white" style="">
<input type="text" class="form-control text-black required " id="adf_bd_engineTypes" name="adf_bd_engineTypes" data-inputmask="'regex': '^[0-9a-zA-Z]', 'repeat': 15, 'placeholder': ''">
</div>
</div>
</div>
</div>
</div>

Answer 1

It happens because there are many nested row inside another row. So bootstrap divides nested row to 12 columns.
What we want is to create just four columns and then put content there:
<div class="container mt-3">
<div class="row border">
<div class="col-4">
<label for="adf_bd_nationality" class="bg-gray-light text-black">
Registration (Tail No.)
</label>
</div>
<div class="col-4 border-left">
<input class="form-control" />
</div>
<div class="col-2 border-left">
<label for="adf_bd_serialNo" class="bg-gray-light d-flex align-items-center col-form-label text-black
col-form-label-sm">
Serial No.
</label>
</div>
<div class="col-2 border-left">
<input type="text" class="form-control text-black text-center " id="adf_bd_serialNo" name="adf_bd_serialNo" onkeypress="return /[0-9a-zA-Z]/i.test(event.key)" maxlength="10">
</div>
</div>
<div class="row border">
<div class="col-4">
<label for="adf_bd_nationality" class="bg-gray-light text-black">
Registration (Tail No.)
</label>
</div>
<div class="col-4 border-left">
<input class="form-control" />
</div>
<div class="col-2 border-left">
<label for="adf_bd_serialNo" class="bg-gray-light d-flex align-items-center col-form-label text-black
col-form-label-sm">
Serial No.
</label>
</div>
<div class="col-2 border-left">
<input type="text" class="form-control text-black text-center " id="adf_bd_serialNo" name="adf_bd_serialNo" onkeypress="return /[0-9a-zA-Z]/i.test(event.key)" maxlength="10">
</div>
</div>
<div class="row border">
<div class="col-4">
<label for="adf_bd_nationality" class="bg-gray-light text-black">
Registration (Tail No.)
</label>
</div>
<div class="col-4 border-left">
<input class="form-control" />
</div>
<div class="col-2 border-left">
<label for="adf_bd_serialNo" class="bg-gray-light d-flex align-items-center col-form-label text-black
col-form-label-sm">
Serial No.
</label>
</div>
<div class="col-2 border-left">
<input type="text" class="form-control text-black text-center " id="adf_bd_serialNo" name="adf_bd_serialNo" onkeypress="return /[0-9a-zA-Z]/i.test(event.key)" maxlength="10">
</div>
</div>
<div class="row border">
<div class="col-4">
<label for="adf_bd_nationality" class="bg-gray-light text-black">
Registration (Tail No.)
</label>
</div>
<div class="col-8 border-left">
The right border
</div>
</div>
</div>