The easiest and most efficient approach to align a button at the bottom of a div is to make use of CSS position property.
In this approach, we set the position of the parent div to relative and the position of the button or the div that contains the button to absolute so that the button could be positioned relative to its parent.
Once this is done, you can use the bottom, left, and right properties to specify how far should the button be placed from the bottom, left and right edges of the parent div element.
See the following working example:
Example:
.cont{
height: 300px;
position: relative;
border: 2px solid red;
}
.cont .btn-cont{
position: absolute;
bottom: 20px;
right: 20px;
}
If you have two buttons and want one of them to align at the bottom left and another at the bottom right, you can do so by taking the help of CSS float property.
For left alignment use float: left; and for right alignment use float: right;
See the following working example:
Example:
.cont{
height: 300px;
position: relative;
border: 2px solid red;
}
.cont .btn-cont{
position: absolute;
bottom: 20px;
right: 20px;
left: 20px;
}
.right-btn{
float: right;
}
