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:

![enter image description here](https://i.stack.imgur.com/rAwsJ.png)