Allign text in a div to bootom with bootstrap3 - html

Question

I want to align my tittle to the bottom of my container, in my wordpress site which uses bootstrap, how to do this?
I tried playing with positive and relative positioning but I'm getting txt aligned to all the lef or at the very top..
here is my code:
<div class="container-fluid pre-content-banner">
<div class="container">
<div class="intro-title bottom-aligned-text">
<h1><?php the_title(); ?></h1>
</div>
</div>
</div> <!-- end container fluid -->
CSS:
.pre-content-banner {
height: 300px;
background: white url("images/businessppl-bg.jpg") no-repeat center;
background-size: cover;
position: relative;
}
.intro-title {
position: relative;
bottom: 0;
left: 0;
}
I'm getting this result:

Answer 1

you just convert relative to absolute
.pre-content-banner {
height: 300px;
background: white url("images/businessppl-bg.jpg") no-repeat center;
background-size: cover;
position: relative;
}
.intro-title {
position: absolute;
bottom: 0;
left: 0;
}
.container{
margin-bottom:30px /*this margin == height of h1*/
}
or use javascript and change position of element

Answer 2

change to this, maybe the value of bottom should be fit your title. So you can according to your title's height to set it. Pay attention width:100%,because of absolute out of the flow.So you must set it!
.intro-title {
position: absolute;
bottom: 0;
left: 0;
width:100%;
}

Answer 3

I figured out the right combination:
.pre-content-banner {
height: 300px;
background: white url("images/businessppl-bg.jpg") no-repeat center;
background-size: cover;
position: relative;
}
.intro-title {
position: absolute;
bottom: 0;
}
In the .intro-title class the "left" attribute has been pushing the div all the way to the left :)

Answer 4

Here is a little CSS trick that allows you to align content to the bottom of its container, in a similar fashion to how vertical-align="bottom" works in table-based layouts. http://codepen.io/dfrierson2/pen/myRaNy
.container-fluid, .pre-content-banner {
height: 150px;
width:900px;
border:1px solid #000;
position: relative;
}
.container {
position: absolute;
bottom: 0px;
text-align: center;
border: 1px solid red;
}
#intro-title bottom-aligned-text{
font-size: 20px;
font-weight: normal;
margin:0;
}
<div class="container-fluid pre-content-banner">
<div class="container">
<h1 id="intro-title bottom-aligned-text">Test Title</h1>
</div>
</div>