Как разместить текст специально в Bootstrap Jumbotron?

Question

В моем Jumbotron я хотел бы иметь некоторый текст, прикрепленный к нижнему левому углу Jumbotron. У меня есть некоторые max-width & max-height свойства, которые, я думаю, могут быть проблемой, но я не уверен. Я получил это в коде ниже, но когда страница изменяется, текст сдвигается с Jumbotron или позиционирует все неудобные.

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; 
}` 

Answer 1

Это потому, что вы позиционируете Н5 абсолютного на страницу, а не к элементу, чтобы исправить это сделать это: скрипку здесь: https://jsfiddle.net/agc3e3yp/2/

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

Примечание текст будет st плохо перемещаться, но это потому, что родительский элемент меняет размер при изменении размера экрана. но теперь он останется внутри коробки на 90% от ее высоты. Лучшее предложение - просто поместить свой текст в div и создать его сами.

Сообщите мне, что это работает для вас :)