Bootstrap center text in a div that automatically fill the height of screen

Question

Quite new here, I'll try my best to explain. I'm trying to do a one page bootstrap application with several <div> and a nav bar on the very top of the page. I'd like that <div> fill the height of browser window, with text in the center of that div.

My problems

the text won't center
if I remove the outer wrapper <div id="welcome" class="welcome"> and put the css on "container fill-height", the whole section becomes in the middle but not full screen wide. I have no idea why we need two wrappers for that <div class="textWelcome"><h2>welcome to first div</h2></div>.

Below is my code with comments to further explain the question. Thanks in advance for your help!

<div id="welcome" class="welcome">  // when user scroll to this div, it fills the screen under nev bar
   <div class="container fill-height">
      <div class="textWelcome">
          <h2> Welcome to first div </h2> //this text should be in the middle of the "welcome" div 
      </div>
   </div>
</div>

This is my current CSS which does not work:

.welcome{
    padding-top: 150px;
    padding-bottom: 150px;
    background: #E41b13; 
 }

.textWelcome{
   vertical-align: middle;
   font-family: 'Georgia';
   color: rgb(255, 255, 255); /*white text*/
   font-weight: bold
}

Update: Now everything seems ok except that text is not vertically centered

    <div class="container fill-height">
      <div class="row">
       <div class="col-lg-1"></div>
         <div id="hello" class="col-lg-10">
              <h1 style="text-align:center;"> Hello World</h1>
         </div>
       <div class="col-lg-1"></div>
     </div>
   </div>

and CSS:

.fill-height{
   padding-top: 150px;
   padding-bottom: 150px;
   background: #E41b13; 
   min-height: 100%;
   height:100vh;
 }

#hello{
  vertical-align: middle;
  font-family: 'Georgia';
  color: rgb(255, 255, 255); /*white text*/
  font-weight: bold
}

score 4 · Accepted Answer · answered Feb 08 '17 at 13:00

4

You can use the transform property:

#hello{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-family: 'Georgia';
color: rgb(255, 255, 255); /*white text*/
font-weight: bold
}

Pen: http://codepen.io/giannidk/pen/bgxjLW

answered Feb 08 '17 at 13:00

gianni

1,199
2
14
28

1

also, remember position relative in the containning element. – gianni Feb 08 '17 at 13:02

score 1 · Answer 2 · answered Feb 07 '17 at 05:29

1

Firstly put your code in container class.And in order to make all section in center, Use bootstrap . You can use text-align:center; property to make text in center. Below is the code:

 <div class="container">
     <div class="row">
      <div class="col-lg-1"></div>
      <div class="col-lg-10">
        <h1 style="text-align:center;"> Hello World</h1>
      </div>
     <div class="col-lg-1"></div>
  </div>
</div>

answered Feb 07 '17 at 05:29

KiranPurbey

335
4
15

1

He is talking about verticle center. – Ubiquitous Developers Feb 07 '17 at 05:33
1

Yes @UbiquitousDevelopers , But his main problem is to make text in center and all section vertically center. It can be done by using `class="container" ` . And by using bootstrap grid. – KiranPurbey Feb 07 '17 at 05:46
Thanks but that text verticle center still doesn't work. What do we need`
` for? I have updated my code based on your sugggestion – user4046073 Feb 07 '17 at 21:06
1

@user4046073, you don't need to put any thing inside `
`. Leave it empty. Please go through bootstrap grid , you will understand . It help to make your sections in center. – KiranPurbey Feb 08 '17 at 07:02
provide me fiddle , i ll explain you in detail. – KiranPurbey Feb 08 '17 at 07:06
This will just place the content at the middle of the first row, which need not be the vertical center. So this would not work. – Pavan Dittakavi Aug 30 '19 at 19:20

Bootstrap center text in a div that automatically fill the height of screen

2 Answers2