html5 - How to make the top row of a Bootstrap grid fill the entire screen -


a common, modern design technique responsive websites use screen-height element above-the-fold content wrapper, , have other content available below. here's discussion on technique. here's a demo @ codepen:

#fullscreen {     width: 100%;     height: 100%;     display: table; }  #fullscreen .fullscreen-content {     display: table-cell;     text-align: center;     vertical-align: middle; }  <div id="fullscreen">     <div class="fullscreen-content">     ...      </div> </div> 

how can make bootstrap 3 row behave in manner?

i'm facing challenge. here's current solution.

.full-ht {     height: 100vh;     position: relative; } .full-ht-content {     position: absolute;     top: 0;     bottom: 0;     width: 100%;     margin-left: -15px;     padding-left: 15px; }  <div class="container-fluid">     <div class="row full-ht">         <div lass="col-xs-12 full-ht">                             <div id="page-top-content" class="full-ht-content">                  above-the-fold content.             </div>         </div>     </div>      <div class="row">         <div class="col-xs-12">             other content.         </div>     </div> </div> 

fiddle demo


Comments

Popular posts from this blog

How to provide Authorization & Authentication using Asp.net, C#? -

toolbar - How to add link to user registration inside toobar in admin joomla 3 custom component -

How to use Authorization & Authentication in Asp.net, C#? -