How do I bottom-align grid elements in bootstrap fluid layout
Please note: for Bootstrap 4+ users, please consider Christophe's solution (Bootstrap 4 introduced flexbox, which provides for a more elegant CSS-only solution). The following will work for earlier versions of Bootstrap...
See http://jsfiddle.net/jhfrench/bAHfj/ for a working solution.
//for each element that is classed as 'pull-down', set its margin-top to the difference between its own height and the height of its parent
$('.pull-down').each(function() {
var $this = $(this);
$this.css('margin-top', $this.parent().height() - $this.height())
});
On the plus side:
- in the spirit of Bootstrap's existing helper classes, I named the class
pull-down
. - only the element that is getting "pulled down" needs to be classed, so...
- ...it's reusable for different element types (div, span, section, p, etc)
- it's fairly-well supported (all the major browsers support margin-top)
Now the bad news:
- it requires jQuery
- it's not, as-written, responsive (sorry)
Bootstrip grid elements - vertically align most content to top but button to bottom
You can wrap <h2>
and <p>
inside a <div>
of each grid element.
Like this, you will have two children for each one: <div>
and <button>
.
Then, you can use some Bootstrap classes for a flexbox layout.
Add d-flex
, flex-column
justify-content-between
to each grid element.
These classes will add display: flex
, flex-direction: column
and justify-content: space-between
.
<div class="row services">
<div class="col-lg-4 col-md-6 icon-box d-flex flex-column justify-content-between" data-aos="fade-up">
<div>
<h3 class="title">Element 1</h3>
<p class="description collectiontext">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquid explicabo tempora nostrum, minus distinctio suscipit in? Nemo unde dolor amet perspiciatis blanditiis deleniti, explicabo sed necessitatibus maiores quae culpa libero?</p>
</div>
<button class="btn btnGetQuote" onclick="javascript:functionA()">Get quote</button>
</div>
<div class="col-lg-4 col-md-6 icon-box d-flex flex-column justify-content-between" data-aos="fade-up">
<div>
<h3 class="title">Element 2</h3>
<p class="description collectiontext">Element description</p>
</div>
<button class="btn btnGetQuote" onclick="javascript:functionB()">Get quote</button>
</div>
<div class="col-lg-4 col-md-6 icon-box d-flex flex-column justify-content-between" data-aos="fade-up">
<div>
<h3 class="title">Element 3</h3>
<p class="description collectiontext">Element description</p>
</div>
<button class="btn btnGetQuote" onclick="javascript:functionB()">Get quote</button>
</div>
<div class="col-lg-4 col-md-6 icon-box d-flex flex-column justify-content-between" data-aos="fade-up">
<div>
<h3 class="title">Element 4</h3>
<p class="description collectiontext">Element description</p>
</div>
<button class="btn btnGetQuote" onclick="javascript:functionC()">Get quote</button>
</div>
<div class="col-lg-4 col-md-6 icon-box" data-aos="fade-up"></div>
</div>
Vertical align middle with Bootstrap responsive grid
Add !important
rule to display: table
of your .v-center
class.
.v-center {
display:table !important;
border:2px solid gray;
height:300px;
}
Your display property is being overridden by bootstrap to display: block
.
Example
Push column in a grid to the bottom, vertically align not working
Add float:none
for your child element.
.child {
border: 1px dotted blue;
display: table-cell;
vertical-align:bottom;
text-align:center;
float:none;
}
DEMO
Related Topics
How to Put Text Over an Image Without Absolute Positioning or Setting The Image as Backbround
How to Convert Escape Characters in HTML Tags
How to Make Links in Fromhtml Clickable? (Android)
Pseudo Elements Breaking Justify-Content: Space-Between in Flexbox Layout
Iframe 100% Height Inside Body with Padding
Google Chrome Version 40 Srcset Attribute Problems
Wrapping Two Columns of Text Around an Image/Shape from Both Sides HTML CSS
Difference Between "Lang" and "Type" Attributes in a Script Tag
How to Make Rectangular Image Appear Circular with CSS
Video HTML5: How to Display Thumbnail from Video on a Specific Time
To "User-Scalable=No" or Not to "User-Scalable=No"
The Ajax Response: Data (JSON, Xml) or HTML Snippet
Delete HTML Tags in Sed or Similar
Flipping/Inverting/Mirroring Text Using CSS Only
Responsive Square Divs Cross Browser Compatible
How Is CSS Applied by The Browser, and Are Repaints Affected by It