Bootstrap 4 textarea fill remaining 2nd column height

Question

so basically i have 2 columns, one with some inputs and one with only a textarea. The problem is that i want the textarea which is in the 2nd column, to fill the remaining height of the first one but i can't get this working. I tried giving textarea an height of 100%.

Here is a pen with an example:

https://codepen.io/anon/pen/BqQMvG

<section class="contact-us">
  <div class="container" style="background-color: #D6EEFD">
    <div class="p-3">
      <h1 class="primary-brand">
        Title
      </h1>
      <p class="primary-brand">
        Eam ex scaevola eloquentiam, ex possim torquatos per. Pro an mnesarchum assueverit. Aeque oportere rationibus ei has, unum case ut qui, eum ne hinc eligendi. Nam no harum omnium, id nominavi comprehensam pri.
      </p>

      <form>
        <div class="container">
          <div class="row">
            <div class="col">
              <div class="form-group">
                <label for="name-input">Name</label>
                <input type="text" class="form-control form-control-lg" id="name-input" aria-describedby="nameHelp">
              </div>
              <div class="form-group">
                <label for="email-input">E-mail</label>
                <input type="email" class="form-control form-control-lg" id="email-input" aria-describedby="emailHelp">
              </div>
              <div class="form-group">
                <label for="phone-input">Phone number</label>
                <input type="tel" class="form-control form-control-lg" id="phone-input" aria-describedby="phoneHelp">
              </div>
            </div>
            <div class="col">
              <div>
                <label for="description-input">How can we help you?</label>
                <textarea class="form-control form-control-lg" id="description-input"></textarea>
              </div>
            </div>
          </div>

          <button type="submit" class="btn btn-primary">Submit</button>
        </div>
      </form>
    </div>

  </div>
</section>

What am i missing?

score 2 · Accepted Answer · answered Oct 08 '18 at 14:38

Just use the Bootstrap h-100 class. Remember height:100% only works if the parent has a defined height. Therefore use h-100 on both the inner div and textarea.

https://codepen.io/anon/pen/ePBXKR

<section class="contact-us">
  <div class="container" style="background-color: #D6EEFD">
    <div class="p-3">
      <h1 class="primary-brand">
        Title
      </h1>
      <p class="primary-brand">
        Eam ex scaevola eloquentiam, ex possim torquatos per. Pro an mnesarchum assueverit. Aeque oportere rationibus ei has, unum case ut qui, eum ne hinc eligendi. Nam no harum omnium, id nominavi comprehensam pri.
      </p>

      <form>
        <div class="container">
          <div class="row">
            <div class="col">
              <div class="form-group">
                <label for="name-input">Name</label>
                <input type="text" class="form-control form-control-lg" id="name-input" aria-describedby="nameHelp">
              </div>
              <div class="form-group">
                <label for="email-input">E-mail</label>
                <input type="email" class="form-control form-control-lg" id="email-input" aria-describedby="emailHelp">
              </div>
              <div class="form-group">
                <label for="phone-input">Phone number</label>
                <input type="tel" class="form-control form-control-lg" id="phone-input" aria-describedby="phoneHelp">
              </div>
            </div>
            <div class="col">
              <div class="h-100">
                <label for="description-input">How can we help you?</label>
                <textarea class="form-control form-control-lg h-100" id="description-input"></textarea>
              </div>
            </div>
          </div>

          <button type="submit" class="btn btn-primary">Submit</button>
        </div>
      </form>
    </div>

  </div>
</section>

The columns (col) will be the same height since Bootstrap 4 uses flexbox.

Bootstrap 4 textarea fill remaining 2nd column height

1 Answers1