Bootstrap Layout - Переместить вниз заголовок

Question

Я плохо разбираюсь в HTML/CSS, так как мне бы хотелось, чтобы мне была нужна ваша помощь. Это просто проблема. Я использую Bootstrap, и это то, что я получаю на своей странице (заголовок).

Но я хочу что-то вроде этого (переместить его вниз, название обивка 30px (например) от левой и нижней):

Вот мой заголовок раздела HTML код:

<header class="business-header" style="background: url('http://localhost/img/clanok.jpg')"> 
     <div class="container"> 
      <div class="row"> 
       <div class="col-lg-12"> 
        <h1 class="tagline">Article name</h1> 
       </div> 
      </div> 
     </div> 
    </header> 

И вот CSS для «бизнес-заголовка» и «tagline» (другие классы взяты из бутстрапа):

.business-header { 
    height: 300px; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    background-size: cover; 
    -o-background-size: cover; 
} 
.tagline { 
    background: rgba(0, 0, 0, 0.5); 
    color: #fff; 
} 

Надеюсь, вы поможете мне: :(

Answer 1

я переехал класс "подзаголовок" в DIV с h1 и благодаря Frank Egan (изменить CSS), он прекрасно работает. Heres решение:

<header class="business-header" style="background: url('http://localhost/img/clanok.jpg')"> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-lg-12 tagline"> 
       <h1>Article name</h1> 
      </div> 
     </div> 
    </div> 
</header> 

CSS

.business-header { 
    position: relative; 
    height: 300px; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    background-size: cover; 
    -o-background-size: cover; 
} 
.tagline { 
    background: rgba(0, 0, 0, 0.5); 
    text-shadow: 0 0 25px #000; 
    color: #fff; 
    width: 100%; 
    padding: 0 0 10px 50px; 
    bottom: 0; 
    left: 0; 
    position: absolute; 
    margin: 0; 

Answer 2

.business-header { 
    position: relative; 
} 

.tagline { 
    position: absolute; 
    width: 100%; 
    left: 0; 
    bottom: 0; 
    padding: 30px; 
} 

Answer 3

Вот что вы ищете! WORKING DEMO

.business-header { 
 
    height: 300px; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    background-size: cover; 
 
    -o-background-size: cover; 
 
} 
 
.tagline { 
 
    background: rgba(0, 0, 0, 0.5); 
 
    color: #fff; 
 
    padding: 30px; 
 
    margin: 0; 
 
    position: fixed; 
 
    width: 100%; 
 
    bottom: 0; 
 
    left: 0; 
 
}

<header class="business-header" style="background: url('http://localhost/img/clanok.jpg')"> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="col-lg-12"> 
 
     <h1 class="tagline">Article name</h1> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</header>