Bootstrap - how to set content in new line

Question

I just started to learn Bootstrap - I want to get a result like this:

But without using <br>.

At the moment my code looks like:

HTML FILE:

<div class="container-fluid" id="home">
<div class="row">
    <div class="col-md-8">
      <div class="row">
        <div class="col-md-5"></div>
        <div class="col-md-7">
                <h1>Upper text here <br> lower text here</h1>
        </div>
      </div>
    <div class="col-md-4"></div>
  </div>
</div>
</div>

CSS FILE:

#home{
text-align: center;}

If I change div class="col-md-5" to less than 5 or higher it doesn't help.

Solution

Here you go..

<div class="container-fluid" id="home">
<div class="row">
    <div class="col-md-8">
      <div class="row">
        <div class="col-md-5"></div>
        <div class="col-md-7">

        <h1>Upper text here </h1>
        <h1>lower text here </h1>


        </div>
      </div>
    <div class="col-md-4"></div>
  </div>
</div>
</div>

CSS

   #home{
    text-align: center;}

DEMO

DEMO WITH MODIFIED LINE HEIGHT

Comments

[Wojtkovy]

When I put <h1> twice, there is much space, other idea?

[Satej S]

@Wojtkovy, I have updated the answer for a changed line height as well.