Align button to bottom of div in desktop and left of div in mobile

Question

I am trying to align the button to the bottom of this div (so the bottom is flush with the bottom of textarea).

I was able to do this by adding the following class to button:

.btn-bottom {
    position: absolute;
    top: 130px;
}

Unfortunately, doing so made the button disappear entirely on mobile:

How can I make the button align with the bottom of the textarea on desktop and with the left edge of the textarea on mobile?

<div class="padding">
    <div class="container">
        <div class="row">
            <h3 class="text-center">Contact Us</h3>
            <h5 class="text-center title-lighter">Our team will respond within 48 hours.</h5>
        </div>
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <div class="col-md-4">
                    <label for="inputname">Name</label>
                    <input type="text" class="form-control" id="inputname">
                </div>
                <div class="col-md-4">
                    <label for="email">E-mail</label>
                    <input type="text" class="form-control" id="email">
                </div>
                <div class="col-md-4">
                    <label for="organization">Organization</label>
                    <input type="text" class="form-control" id="organization">
                </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-8 col-md-offset-2">
                    <div class="col-md-8">
                        <label for="message">Message</label>
                        <textarea class="form-control input-lg" style="min-width: 100%;" rows="5" id="message"></textarea>

                    </div>
                    <div class="col-md-4">

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

can you run this code with your bootstrap in something like codepen? that way we can see how its running — Riskbreaker, Nov 21 '18 at 16:01
@Riskbreaker I've added a link above, thanks for suggestion! — extensionhelp, Nov 21 '18 at 16:07

score 1 · Accepted Answer · answered Nov 21 '18 at 18:04

You could set the columns of the elements containing the textarea and the button to be display: inline-block (you would have to set float: none for this to work) and then use vertical-align: bottom to align the elements to the bottom of the line that they're siting on.

I also added a class of .row--mod to the row of the element containing the textarea and the button to help target the elements.

.row--mod .col-md-8.col-md-offset-2 > * {
  float: none;
  display: inline-block;
  vertical-align: bottom;
}

.row--mod .col-md-8.col-md-offset-2> :first-child {
  margin-right: -4px;
  width: 66.6667%;
}

Using inline-block creates extra spacing which you can get rid using a number of methods (I've opted for a negative margin).

See below for a demo:

body {
  font-size: 12px !important;
  font-family: 'Roboto Condensed', sans-serif !important;
  font-weight: 400 !important;
}

.title-lighter {
  font-family: 'Roboto', Arial, Helvetica, sans-serif;
  color: #737373;
}

.centering {
  float: none;
  margin: 0 auto;
}

.btn-centering {
  width: 90% !important;
  margin-left: 5% !important;
  margin-bottom: 5px !important;
}

.padding {
  padding: 80px 0;
}

.contact-form {
  background: #fff;
  margin-top: 10%;
  margin-bottom: 5%;
  width: 70%;
}

.contact-form .form-control {
  border-radius: 1rem;
}

.contact-form form {
  padding: 14%;
}

.contact-form form .row {
  margin-bottom: -7%;
}

.contact-form h3 {
  margin-bottom: 8%;
  margin-top: -10%;
  text-align: center;
  color: #0062cc;
}

.contact-form .btnContact {
  width: 50%;
  border: none;
  border-radius: 1rem;
  padding: 1.5%;
  background: #dc3545;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
}

.btnContactSubmit {
  width: 50%;
  border-radius: 1rem;
  padding: 1.5%;
  color: #fff;
  background-color: #0062cc;
  border: none;
  cursor: pointer;
}

.centered-row {
  text-align: center;
}

.btn-bottom {
  display: table-cell;
  vertical-align: bottom;
}

.box {
  display: table !important;
  width: 100%;
  height: 100%;
}

@media (min-width: 992px)
{
.row--mod .col-md-8.col-md-offset-2 > * {
  float: none;
  display: inline-block;
  vertical-align: bottom;
}

.row--mod .col-md-8.col-md-offset-2> :first-child {
  margin-right: -4px;
  width: 66.6667%;
  
}
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="padding">
  <div class="container">
    <div class="row">
      <h3 class="text-center">Contact Us</h3>
      <h5 class="text-center title-lighter">Our team will respond within 48 hours.</h5>
    </div>
    <div class="row">
      <div class="col-md-8 col-md-offset-2">
        <div class="col-md-4">
          <label for="inputname">Name</label>
          <input type="text" class="form-control" id="inputname">
        </div>
        <div class="col-md-4">
          <label for="email">E-mail</label>
          <input type="text" class="form-control" id="email">
        </div>
        <div class="col-md-4">
          <label for="organization">Organization</label>
          <input type="text" class="form-control" id="organization">
        </div>
      </div>
    </div>
    <div class="row row--mod">
      <div class="col-md-8 col-md-offset-2">
        <div class="col-md-8">
          <label for="message">Message</label>
          <textarea class="form-control input-lg" style="min-width: 100%;" rows="5" id="message"></textarea>

        </div>
        <div class="col-md-4">

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

Align button to bottom of div in desktop and left of div in mobile

1 Answers1