html - How to position text specifically in Bootstrap Jumbotron? -

in jumbotron, have text pinned bottom left corner of jumbotron. have max-width & max-height properties think might issue, i'm not sure. i've gotten sort of in code below, when page resized text moves off of jumbotron or positions wonky.

html:

<a href="#"> <div class="six">   <div class="col-sm-4">   <div class="jumbotron">   </a>     <h5>text</h5>     </div>   </div> </div> 

css:

    .six .jumbotron     { background: url("img") no-repeat center center;     -webkit-background-size: 100% 100%;     -moz-background-size: 100% 100%;     -o-background-size: 100% 100%;     background-size: 100% 100%;     min-width: 220px;     max-width:250px;     min-height:260px;     max-height:300px;     margin: 0 auto;     margin: 3em auto;     }   `  .six .jumbotron > h5{   position:absolute;   color:#000;   left:10px;   bottom:10px;   font-size:15px; }` 

it's because position h5 absolute page , not element, fix this: fiddle here:https://jsfiddle.net/agc3e3yp/2/

 .jumbotron h5{  margin-top:90%;   left:10px;  font-size:15px;  color:#fff; } 

note text still move around, because parent element changing size when change screen size. stay inside box @ 90% of it's height. best bet put text in div , style yourself.

let me know works :)