Home / Questions / 145371
Accepted
John Doe
Asked: 2020-03-12 19:36:26 +0800 CST 2020-03-12 19:36:26 +0800 CST

Align form Bootstrap TextArea

  • 772

How can I organize my form, I'm using bootstrap but I can't organize the description field which is a textarea under the other two inputtext

enter image description here

This is the code I am using

<form>
        <div class="form-row">
            <div class="form-group col-md-4">
                <?= $form->field($model, 'idArea')->textInput(['maxlength' => true]) ?>
            </div>
            <div class="form-group col-md-4">
                <?= $form->field($model, 'Nombre')->textInput(['maxlength' => true]) ?>
            </div>
        </div>

        <div class="form-row">
            <?= $form->field($model, 'Descripcion')->textarea(['maxlength' => true, 'style' => 'width:40%']) ?>
        </div>
    </form>
html

1 Answers

  1. Best Answer

    If I understand the problem correctly:

    I can't arrange the description field which is a textarea under the other two inputtext

    So to put it below the two inputs and occupy "the full width" you have several options:

    1. Use the class colon each element in the row:

      <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<form>
  <div class="form-row">
    <div class="col">
      <label for="exampleInput1">First name</label>
      <input type="text" class="form-control" id="exampleInput1" placeholder="First name">
    </div>
    <div class="col">
      <label for="exampleInput2">Last name</label>
      <input type="text" class="form-control"  id="exampleInput2" placeholder="Last name">
    </div>
  </div>
  <div class="form-row">
    <div class="col">
      <label for="exampleFormControlTextarea1">Example textarea</label>
      <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
    </div>
  </div>
</form>

    2. Use the typical 12-column grid syntax:

      <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<form>
  <div class="form-row">
    <div class="col-xs-12 col-sm-6">
      <label for="exampleInput1">First name</label>
      <input type="text" class="form-control" id="exampleInput1" placeholder="First name">
    </div>
    <div class="col-xs-12 col-sm-6">
      <label for="exampleInput2">Last name</label>
      <input type="text" class="form-control"  id="exampleInput2" placeholder="Last name">
    </div>
  </div>
  <div class="form-row">
    <div class="col">
      <label for="exampleFormControlTextarea1">Example textarea</label>
      <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
    </div>
  </div>
</form>

    • 4