CODEWITHSUNDEEP
htmlcssbootstrap-4
J McMillan
J McMillan

Reputation: 13

How can I align form input to the bottom of the page with Bootstrap?

How can I align a bootstrap form input to the bottom of the page? I've tried several different approaches nothing has worked.

How it currently looks.

How I want it too look.

I need to align the form element to the bottom to make it look like proper messaging input.

However, when I attempt to use form { position: fixed; bottom: 0; } it changes the formatting of the input like so.

Thanks for the help.

<div class="container-fluid">
  <div class="row">
    <div class="col-md-3 messages">
      <p class="city">Edinburgh Uni <i class="fa fa-graduation-cap"></i><i style="float:right" class="fa fa-sort-desc"></i></p>
      <p class="paddingLeft" style="margin-top:-15px"><i class="fa fa-user-circle"></i> Jack</p>
    </div>
    <div class="col-md-9">
      <h4 style="margin-top:20px">International Business 📈 <i style="float:right" class="fa fa-cog"></i></h4>
      <p class="description"><i class="fa fa-user"></i> 10 | Support group for International Business Students class of 2019.</p>
      <hr>
      <form>
        <div class="form-row">
          <div class="col">
            <input type="text" class="form-control" placeholder="Message">
          </div>
          <button type="submit" class="btn btn-primary">Send</button>
        </div>
      </form>
    </div>
  </div>
</div>

Upvotes: 1

Views: 4944

Answers (2)

Alex Ananjev
Alex Ananjev

Reputation: 279

Try this (use position that is the most appropriate to you):

form { position: fixed; bottom: 0; }

Hope this helps :)

Upvotes: 2

Canica
Canica

Reputation: 2738

position: absolute; bottom: 0;

use absolute position on the form, and place it 0 pixels from the bottom of its parent; make sure the parent container (col-md-9) has an appropriate height for this to work.

Upvotes: 2

Related Questions