You need to change column distribution in your code. I have uploaded, check changes in code for textarea only.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="row">
<div class="col-md-6">
<div class="form-group row">
<label for="inputName" class="control-label col-3 col-form-label">Reg.No</label>
<div class="col-9">
<input class="form-control input-sm" type="text" id="inputName"
asp-for="RegNo" />
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group row">
<label for="inputName" class="control-label col-3 col-form-label">Description</label>
<div class="col-9">
<input class="form-control input-sm" type="text" id="inputName"
asp-for="VehicleName" />
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group row">
<label for="MOTDate" class="control-label col-3 col-form-label">MOT Date</label>
<div class="col-9">
<input class="form-control input-sm" type="text" id="inputName"
asp-for="MOTDate" />
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group row">
<label for="TaxDate" class="control-label col-3 col-form-label">Tax Date</label>
<div class="col-9">
<input class="form-control input-sm" type="text" id="inputName"
asp-for="TaxDate" />
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group row">
<label for="InsuredDate" class="control-label col-3 col-form-label">Date insured</label>
<div class="col-9">
<input class="form-control input-sm" type="text" id="inputName"
asp-for="InsuredDate" />
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group row">
<label for="RegDate" class="control-label col-3 col-form-label">Reg Date</label>
<div class="col-9">
<input class="form-control input-sm" type="text" id="inputName"
asp-for="RegDate" />
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group row">
<label for="Comment" class="control-label col-3 col-form-label">Comment</label>
<div class="col-9">
<textarea asp-for="Comment" class="form-control"></textarea>
</div>
</div>
</div>
</div>
col-3 in col-md-6 equals col-1.5 in col-md-12. You can customize col-1.5 and col-10.5 like below:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style>
.custom-label-col {
width: 12.5%;
flex: 0 0 12.5%;
max-width: 12.5%;
}
.custom-area-col {
width: 87.5%;
flex: 0 0 87.5%;
max-width: 87.5%;
}
</style>
<div class="row">
<div class="col-md-6">
<div class="form-group row">
<label for="inputName" class="control-label col-3 col-form-label">Make</label>
<div class="col-9">
<input class="form-control input-sm" type="text" id="inputName"
asp-for="Make" />
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group form-group-sm row">
<label for="inputName" class="control-label col-3 col-form-label">Model</label>
<div class="col-9">
<input class="form-control input-sm" type="text" id="inputName"
asp-for="Model" />
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group row">
<label for="inputName" class="control-label col-3 col-form-label">Reg.No</label>
<div class="col-9">
<input class="form-control input-sm" type="text" id="inputName"
asp-for="RegNo" />
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group row">
<label for="inputName" class="control-label col-3 col-form-label">Description</label>
<div class="col-9">
<input class="form-control input-sm" type="text" id="inputName"
asp-for="VehicleName" />
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group row">
<label for="MOTDate" class="control-label col-3 col-form-label">MOT Date</label>
<div class="col-9">
<input class="form-control input-sm" type="text" id="inputName"
asp-for="MOTDate" />
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group row">
<label for="TaxDate" class="control-label col-3 col-form-label">Tax Date</label>
<div class="col-9">
<input class="form-control input-sm" type="text" id="inputName"
asp-for="TaxDate" />
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group row">
<label for="InsuredDate" class="control-label col-3 col-form-label">Date insured</label>
<div class="col-9">
<input class="form-control input-sm" type="text" id="inputName"
asp-for="InsuredDate" />
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group row">
<label for="RegDate" class="control-label col-3 col-form-label">Reg Date</label>
<div class="col-9">
<input class="form-control input-sm" type="text" id="inputName"
asp-for="RegDate" />
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group row">
<label for="Comment" class="control-label col custom-label-col col-form-label">Comment</label>
<div class="col custom-area-col">
<textarea asp-for="Comment" class="form-control"></textarea>
</div>
</div>
</div>
</div>
I have a form with two column in each row and finally a single column in a single row which for entering the comment using text area. I am trying to start text area column with same column position index of other column. But the text area will be not be showing the same column index of other columns. Please help. I have attached the image here and also my code here with
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="row">
<div class="col-md-6">
<div class="form-group row">
<label for="inputName" class="control-label col-3 col-form-label">Make</label>
<div class="col-9">
<input class="form-control input-sm" type="text" id="inputName"
asp-for="Make" />
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group form-group-sm row">
<label for="inputName" class="control-label col-3 col-form-label">Model</label>
<div class="col-9">
<input class="form-control input-sm" type="text" id="inputName"
asp-for="Model" />
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group row">
<label for="inputName" class="control-label col-3 col-form-label">Reg.No</label>
<div class="col-9">
<input class="form-control input-sm" type="text" id="inputName"
asp-for="RegNo" />
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group row">
<label for="inputName" class="control-label col-3 col-form-label">Description</label>
<div class="col-9">
<input class="form-control input-sm" type="text" id="inputName"
asp-for="VehicleName" />
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group row">
<label for="MOTDate" class="control-label col-3 col-form-label">MOT Date</label>
<div class="col-9">
<input class="form-control input-sm" type="text" id="inputName"
asp-for="MOTDate" />
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group row">
<label for="TaxDate" class="control-label col-3 col-form-label">Tax Date</label>
<div class="col-9">
<input class="form-control input-sm" type="text" id="inputName"
asp-for="TaxDate" />
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group row">
<label for="InsuredDate" class="control-label col-3 col-form-label">Date insured</label>
<div class="col-9">
<input class="form-control input-sm" type="text" id="inputName"
asp-for="InsuredDate" />
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group row">
<label for="RegDate" class="control-label col-3 col-form-label">Reg Date</label>
<div class="col-9">
<input class="form-control input-sm" type="text" id="inputName"
asp-for="RegDate" />
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group row">
<label for="Comment" class="control-label col-2 col-form-label">Comment</label>
<div class="col-10">
<textarea asp-for="Comment" class="form-control"></textarea>
</div>
</div>
</div>
</div>
Thanks your reply. But is there anyway can we can I show the text area in full width of the col-md-12 without splitting col-md-6
