When we are working with forms, a very common pattern that we use is to place the form elements such as inputs, checkboxes, and dropdowns at the upper portion, and the action buttons at the bottom.
But how do you actually align the buttons to the bottom? Well, in this article I will show you a very easy method that you can use to align a button(s) to the bottom of the parent div.
The easiest approach to align a button to the bottom of a div is to use the position property in combination with the top, left, bottom, and right properties.
All you need to do is put the button(s) inside a div container and set its position to absolute. Also, set the position of the parent container inside of which you want to align the buttons to relative. This will let you adjust the position of the button container relative to the parent element.
To set how far the button should be placed from the bottom of the parent use the bottom property.
Here is a working example:
Example:
.container{
height: 250px;
position: relative;
border: 2px solid red;
padding: 10px;
}
.btn-container{
position: absolute;
bottom: 10px;
padding: 10px;
}
If you want to align the buttons to the bottom-right, you have to set the bottom as well as the right properties to some values.
In the following example, we have set the bottom as well as the right properties to a value of 10px. This will place the button container 10px away from the bottom as well as 10px away from the right.
Example:
.container{
height: 250px;
position: relative;
border: 2px solid red;
padding: 10px;
}
.btn-container{
position: absolute;
bottom: 10px;
right: 10px;
padding: 10px;
}
