How can i bring the text area to the same column of other controll

Question

User-1355965324 posted

I am using bootstrap 4 and I am trying to   show the text area column to start from the same column of other text box  in left side of the screen. However I try the text area column does not show  in the same column of other control in left side . please give a help it would be very appreciated .

Text are should be shown across  12 column width. But when I try to show ,  the text area always being showed bit far from other column. I have attached image below

https://drive.google.com/file/d/1bkWIdOVdTGuHdi7UCucxLbmY3uWoVTKR/view?usp=sharing

My code

<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-6">
            <div class="form-group row">
                <label for="VehicleStatusId" class="control-label col-3 col-form-label">Status</label>
                <div class="col-9">
                    <input class="form-control input-sm" type="text" id="inputName"
                           asp-for="VehicleStatusId" />
                </div>
            </div>
        </div>
        <div class="col-md-6">


        </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>

 

Answer 1

User-474980206 posted

Your labels are 3 column in 6 column grid in a 12 column grid. So to get the same width in a 12 column grid it’s needs to be a 1.5 column for the textarea label and 10.5 columns for the textarea. Of course bootstrap does not have half columns, you will need to add custom css.

Answer 2

User1535942433 posted

Hi polachan,

As bruce says,the Comment label need to be a 1.5 column and the textarea need to be 1.5 column.Since col-md-1 is of width 8.33333333%,so simply multiply 8.33333333 * 1.5 and set it as your width.You could use css to override the width of the Column.

More details,you could refer  to below codes:

<div class="row">
        <div class="col-md-12">
            <div class="form-group">
                <label for="Comment" class="control-label col-md-1 col-form-label" style="width: 12.3%; flex: 0 0 12.499%;max-width: 12.499%;">Comment</label>
                <div class="col-md-10" style="width:87.7%;">
                    <textarea asp-for="Comment" class="form-control"></textarea>
                </div>
            </div>
        </div>

    </div>

Result:

Best regards,

Yijing Sun