CODEWITHSUNDEEP
twitter-bootstrap-3
Arkady
Arkady

Reputation: 393

Bootstrap Layout Full Screen 2 Rows

In bootstrap 3, how do I create a layout that fills the entire screen (100% height) and consists of 2 rows as follows (each 50% height) ? The view should not scroll. Thank you for your help

enter image description here

I have started with this mark-up but cannot get the results I need:

<div class="container-fluid">
    <div class="row-fluid">
        <div class="col-lg-12">Top</div>
    </div>
    <div class="row-fluid">
        <div class="col-lg-4">Bottem Left</div>
        <div class="col-lg-4">Bottom Center</div>
        <div class="col-lg-4">Bottom Right</div>
    </div>
</div>

Upvotes: 3

Views: 4264

Answers (2)

isherwood
isherwood

Reputation: 61083

Bootstrap doesn't offer a mechanism to do 100% height layouts. You'll need some custom CSS.

Here's one approach. Your question leaves some things unaddressed, such as what should happen in overflow situations. 

.row > div {
    overflow-y: scroll;
    height: 100%;
}
.row.one-third {
    height: 33.333%;
}
.row.two-thirds {
    height: 66.667%;
}

Demo

Here it is again with 50% heights.

Upvotes: 1

Saubar
Saubar

Reputation: 145

I hope this will help

<div class="container-fluid">
 <div class="row">
  <div class="col-xs-12 col-md-12"><h4>Top row</h4></div>
 </div>
<div class="row">
  <div class="col-xs-4 col-md-4"><h4>Bottom row col 1</h4></p></div>
    <div class="col-xs-4 col-md-4"><h4>Bottom row col 2</h4></div>
    <div class="col-xs-4 col-md-4"><h4>Bottom row col 3</h4></div></div></div>

Upvotes: 1

Related Questions