Auto Margin Bottom
Logo

December 14, 2022

David Vicente

Margin Buttons Bottom

web development

Margin Buttons Bottom

How to put buttons always on bottom

Post last updated: December 14, 2022

How to align buttons to bottom:

  1. Make a "wrapper" container that have min-height: 100vh, display: flex, and flex-direction: column
/* 

if you have other elements on page you must subtract them from the height.

e.g. a Header with 100px: 

min-height: calc(100vh - 100px) 

*/

.wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
  1. Now all the elements inside will inside the wrapper but will not take all the vertical space, use the margin-top: auto to make the desired component to take all the avaliable space.
.last-element {
  margin-top: auto;
}

Example:

Example

Playground: