CODEWITHSUNDEEP
htmlcssbootstrap-4
Mike Irish
Mike Irish

Reputation: 960

Bootstrap html make text area span multiple rows in a form

How do I use bootstrap col and rows to make my text area span multiple rows in a form.

Here is a screenshot of what I mean.

enter image description here

I want the "Notes" text area to span across the two columns to the area that I have highlighted in yellow.

here is the code I have so far

<form>

  <div class="form-row">
    <div class="form-group col-md-4">
      <label for="input-1">input 1</label>
      <input id="input-1" class="form-control full-width" type="text" name="input-1" placeholder="input-1">
    </div>

    <div class="form-group col-md-4">
      <label for="input-2">input 2</label>
      <input id="input-2" class="form-control full-width" type="text" name="input-2" placeholder="input-2">
    </div>

  </div>

  <div class="form-row">
    <div class="form-group col-md-4">
      <label for="input-3">input 3</label>
      <input id="input-3" class="form-control full-width" type="text" name="input-3" placeholder="input-3">
    </div>

    <div class="form-group col-md-4">
      <label for="input-4">input 4</label>
      <input id="input-4" class="form-control full-width" type="text" name="input-4" placeholder="input-4">
    </div>

  </div>

  <div class="form-group">
    <label for="text-content">Notes</label>
    <textarea class="form-control" id="text-content" rows="3"></textarea>
  </div>

  <div class="form-row">
    <div class="form-group col-md-4 offset-md-8">
      <div class="float-right">
        <button type="button" class="btn btn-primary" id="search"> 
           Search</button>
      </div>
    </div>
  </div>
</form>

Upvotes: 5

Views: 5566

Answers (2)

Tim Gerhard
Tim Gerhard

Reputation: 3607

Basically all you need to do is add another container around your elements.

Try this snippet:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js"></script>
<form>
  <div class="form-row">

    <div class="col-md-8">


      <div class="form-row">
        <div class="form-group col-md-6">
          <label for="input-1">input 1</label>
          <input id="input-1" class="form-control full-width" type="text" name="input-1" placeholder="input-1">
        </div>

        <div class="form-group col-md-6">
          <label for="input-2">input 2</label>
          <input id="input-2" class="form-control full-width" type="text" name="input-2" placeholder="input-2">
        </div>
      </div>

      <div class="form-row">
        <div class="form-group col-md-6">
          <label for="input-3">input 3</label>
          <input id="input-3" class="form-control full-width" type="text" name="input-3" placeholder="input-3">
        </div>

        <div class="form-group col-md-6">
          <label for="input-4">input 4</label>
          <input id="input-4" class="form-control full-width" type="text" name="input-4" placeholder="input-4">
        </div>

      </div>
    </div>
    <div class="col-md-4">
      <div class="form-group">
        <label for="text-content">Notes</label>
        <textarea class="form-control" id="text-content" rows="3"></textarea>
      </div>

      <div class="form-row">
        <div class="form-group col-md-4 offset-md-8">
          <div class="float-right">
            <button type="button" class="btn btn-primary" id="search"> 
           Search</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</form>

Upvotes: 4

wertons
wertons

Reputation: 24

You can make the element use 4 columns and make it float to the right, while making the left elements float to the left.

Upvotes: 0

Related Questions