Bootstrap：如何在等高列的底部对齐和居中按钮

Question

I have a three-column layout using Bootstrap 4 columns (col-sm). See codepen: https://codepen.io/anon/pen/EryRJL?editors=1100

I have some text in a paragraph in each column, and a button below the paragraph. How can I align all the buttons vertically at the bottom of the columns, while centering them in their respective columns?

I can push the buttons to the bottom with

.button-container {
    width: 100%;
    position:absolute;
    bottom: 0;
    text-align: center;
}

But then the centering doesn't work because width: 100% shifts the div to the right due to column padding.

Answer 1

I figured it out thanks to this snippet . Instead of width: 100% , I simply needed left: 0 and right: 0 to fit the container properly.