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

Bootstrap alignment techniques

While flexbox is the fast, modern solution, let's dive into alternative methods for bottom alignment and troubleshoot common issues.

Rocking the flexbox world

With Flexbox in Bootstrap 4, bottom alignment is a breeze:

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

Remember to cross your fingers and hope the users are not on outdated browsers!

Dynamic adjustments with media queries

Preserve the responsiveness by employing media queries, combined with the flexbox power:

@media (min-width: 768px) {
  .align-bottom-md {
    align-self: flex-end;
  }
}


Consistent naming with Bootstrap

When crafting custom CSS classes, follow Bootstrap's naming conventions, such as mt-auto-md:

.mt-auto-md {
  @media (min-width: 768px) {
    margin-top: auto;
  }
}


Who knows, maybe someday they will include your class in the next Bootstrap version!

Seizing the power of LESS

Bootstrap 3 folks! You might find LESS preprocessor useful for creating batter-soft mixins:

.bottom-align-mixin() {
  display: inline-block;
  vertical-align: bottom;
  float: none;
}
.col-bottom {
  .bottom-align-mixin();
}


AngularJS dynamic alignments

If AngularJS is your weapon of choice, consider using it for dynamic adjustment of the alignment:

app.directive('pullDown', function() {
  return {
    restrict: 'A',
    link: function(scope, element) {
      // Where the magic happens...or doesn't? 🤷‍♀️
    }
  };
});


Putting alignment strategies into action

Enhance your bottom-alignment methods and add that perfect touch to your layouts.

jQuery or not?

jQuery possesses power but not the responsiveness needed for fluid alignment across all screen sizes. Stick to the pure CSS ways, they don't let you down.

Beat the white spaces

Running into alignment problems with inline-block elements? Show white spaces who's boss by setting the parent's font-size to zero and then resetting on the children:

.row-zero-space {
  font-size: 0;
  /* Look Ma, no spaces! */
}
.col {
  display: inline-block;
  vertical-align: bottom;
  font-size: 16px; /* Bringing it back */
}


Reusable classes for the win

Creating custom, reusable classes to handle alignment bumps will vastly help to beautify your layout and keep your code DRY.

display: table-cell for the rescue

Try using display: table-cell with vertical-align: bottom for bottom alignment:

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

Relive the classic table behavior nostalgia, but be warned - It's not as flexible as flexbox.