Bootstrap 3 Align Text To Bottom of Div
I think your best bet would be to use a combination of absolute and relative positioning.
Here's a fiddle: http://jsfiddle.net/PKVza/2/
given your html:
<div class="row">
<div class="col-sm-6">
<img src="~/Images/MyLogo.png" alt="Logo" />
</div>
<div class="bottom-align-text col-sm-6">
<h3>Some Text</h3>
</div>
</div>
use the following CSS:
@media (min-width: 768px ) {
.row {
position: relative;
}
.bottom-align-text {
position: absolute;
bottom: 0;
right: 0;
}
}
EDIT - Fixed CSS and JSFiddle for mobile responsiveness and changed the ID to a class.
I collected some ideas from other SO question (largely from here and this css page)
Fiddle
The idea is to use relative and absolute positioning to move your line to the bottom:
@media (min-width: 768px ) {
.row {
position: relative;
}
#bottom-align-text {
position: absolute;
bottom: 0;
right: 0;
}}
The display:flex
option is at the moment a solution to make the div get the same size as its parent. This breaks on the other hand the bootstrap possibilities to auto-linebreak on small devices by adding col-sx-12
class. (This is why the media query is needed)