Bootstrap 3 align-items-end equivelent

Question

I've got two Bootstrap 3 columns with some multi-line text in the left hand column and a button in the right-hand column and I want the bottom of the button to appear inline with the bottom of the text.

<div class = "container">
            <div class = "row">
                <div class = "col-sm-6">
                Paul Grenyer</br>
                XX XXXXX Road</br>
                Norwich</br>
                XXX XXX</br>
                </br>
                XXXXX XXX XXX

                </div>
                <div  class = "col-sm-6 align-items-end">
                    <button>Metal</button>
                </div>
            </div>
        </div>

In bootstrap 4 it appears this can be done with align-items-end, is there a bootstrap 3 equivalent?

score 3 · Answer 1 · answered Sep 05 '19 at 19:41

Another solution, based on an answer from the post @Ryan linked, is to use flex:

.row-fluid {
   display: flex;
   align-items: flex-end;
}

Here is a full example (see also jsFiddle):

.row {
  background: #f8f9fa;
  margin-top: 20px;
}
.col {
  border: solid 1px #6c757d;
  padding: 10px;
}
.btn-azure {
  color: #fff;
  background-color: #007bff;
  border-color: #007bff;
}
.btn-azure:hover {
   color: #fff !important;
   background-color: #066EDF !important;
 }
.row-fluid {
  display: flex;
  align-items: flex-end;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container-fluid">
  <div class="row row-fluid">
    <div class="form-group col-5 col-md-5 ">
      <label for="">Name</label>
      <input class="form-control " type="text" id="inputHrDiariamaxima">
    </div>
    <div class="form-group col-xs-5 col-md-5 ">
      <label for="">E-mail:</label>
      <input class="form-control " type="text" id="inputKmDiariamaxima">
    </div>
    <div class="form-group col-6 col-md-2">
      <button class="btn btn-azure">Go!</button>
    </div>
  </div>
</div>

score 0 · Answer 2 · answered Jan 02 '19 at 17:53

It doesn't appear that there's a solution built into Bootstrap 3 to achieve this, but it should be a reasonably easy fix:

.align-bottom {
    font-size: 0;
}
.align-bottom > * {
    float: none;
    display: inline-block;
    font-size: 14px; /* if using LESS it's quicker to just use @font-size-base */
}
.align-bottom > *:last-child {
    vertical-align: bottom;
}
.align-bottom p:last-child {
    margin-bottom: 0; /* optional */
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="row align-bottom">
        <div class="col-sm-6">
          Paul Grenyer<br/>
          XX XXXXX Road<br/>
          Norwich<br/>
          XXX XXX<br/><br/>
          XXXXX XXX XXX
        </div>
        <div  class="col-sm-6 align-items-end">
            <button>Metal</button>
        </div>
    </div>
</div>

This solution has been covered in a couple variations here:

How do I bottom-align grid elements in bootstrap fluid layout

Bootstrap 3 align-items-end equivelent

2 Answers2