How to increase height of textarea using bootstrap rows and columns

Question

I have designed a form in which I have two items in a row, like this:

My output

Code that I used:

<div class="row">
    <div class="col-sm-3">  <!-- [1, 0] -->
        <fieldset class="form-group">
            <label id="fieldTitle">Equipment Length</label>
            <select id="selectOption" class="form-control" required data-error="Please select Equipment Length"></select>
            <div class="help-block with-errors"></div>
        </fieldset>
    </div>
    <div class="col-sm-9">  <!-- [1, 1] -->
        <fieldset class="form-group">
            <label id="fieldTitle">Customer Notes</label>
            <textarea class="form-control" placeholder="Please write customer notes" ng-model="myTextarea" required data-error="Please enter customer notes"></textarea>
            <div class="help-block with-errors"> {{myTextarea}} </div>
        </fieldset>
    </div>
</div>

So, please guide me how do I increase the height of the textarea just like my

desired output please tell me how do I do it. Thanks

Answer 1

With Bootstrap 4 you will need to have the property rows and add "height: 100%;" so that the height would stretch to the number of rows specified. "rows" along does not work.

<textarea rows="10" style="height:100%;"></textarea>