Menu
I have a row in Bootstrap 3 and 3 columns in that row. I want to align two of the columns to the bottom of the row and keep the first column at the top. When I use the traditional approach with position relative in the parent and absolute for both columns I get a weird behavior which I imagine is because of something in twitter bootstrap. Here's a bootply of what's happening:
http://www.bootply.com/125735
The absolute forces all the columns on top of eachother, can anyone help me out? The end result is to have something like so:
http://fahadalee.wordpress.com/2013/12/31/bootstrap-3-help-how-to-alin-div-in-bottom/
Thanks
666
You can use align-items-end from the new Bootstrap 4 flexbox utilities... Also, auto margins work inside flexbox. There you could use mt-auto (margin-top:auto) to "push" the col-* to the bottom.
To center the column horizontally or vertically use Flexbox utilities. Add . d-flex . justify-content-center classes to the parent element of the column (it should be .
To horizontally align columns, we can use the justify-content classes. justify-content-start left align the columns. justify-content-center center aligns the columns. justify-content-end right align the columns.
Bootstrap By Building Projects - Includes Bootstrap 4 Write the columns in an order, and show them in another one. You can easily change the order of built-in grid columns with . col-md-push-* and . col-md-pull-*modifier classes where * range from 1 to 11.
You can use display: table-cell and vertical-align: bottom, on the 2 columns that you want to be aligned bottom, like so:
.bottom-column { float: none; display: table-cell; vertical-align: bottom; } Working example here.
Also, this might be a possible duplicate question.
114
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
