Margin Buttons Bottom
How to put buttons always on bottom
Post last updated: December 14, 2022
How to align buttons to bottom:
- 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;
}
- 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:

