Align form Bootstrap TextArea

Question

Align form Bootstrap TextArea

Navigation

#1 by (4 votes)

3

As I can organize my form, I am using bootstrap but I can not organize the description field which is a textarea below the other two inputtext

This is the code I'm 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 css bootstrap

asked by Sebastian Salazar 12.03.2018 в 04:36

source

1 answer

I have a problem with showing values on the screen with javascript The linked list does not point to NULL at the end

score 4 · Accepted Answer

If I understand the problem well:

I can not organize the description field that is a textarea below the other two inputtext

So to put it under the two input and occupy "the whole width" you have several options:

Use the class col in each element of 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>

Uses the typical syntax of the 12-column grid:

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