CODEWITHSUNDEEP
csstwitter-bootstrap
Shafiq Mustapa
Shafiq Mustapa

Reputation: 433

bootstrap full page with div row 80% and 20%

How do I achieve with bootstrap that full page with div row 80% and 20%.

----------
|        |
|        |
|        |
|        |
----------
|        |
----------

Yes, i can achieve it with table but i want to know will it able to do with div row class

Upvotes: 1

Views: 7799

Answers (2)

Stephen R. Smith
Stephen R. Smith

Reputation: 3400

You can use modern browsers 'vh' measure to set a block size in % of viewport height, then use Bootstraps - container-fluid to get a 100% wide container to wrap the two 80 / 20 divs.

<div class="container-fluid">
  <div class="eighty">
    80%
  </div>
  <div class="twenty">
    20%
  </div>
</div>

And style them:

.eighty {
    height: 80vh;
    border: 1px solid red;
    display: block;
}

.twenty {
    height: 20vh;
    border: 1px solid blue;
    display: block;
}

Here's a plnkr: https://plnkr.co/edit/VASmt6damfbQCk2zcAg0?p=preview

Upvotes: 4

Wayne Allen
Wayne Allen

Reputation: 1745

With a basic bootstrap layout like this,

<div class="content">
  <div class="row eighty">
    <div class="col-xs-6">
      First column
    </div>
    <div class="col-xs-6">
      Second column
    </div>
  </div>
  <div class="row twenty">
    <div class="col-xs-6">
      First column
    </div>
    <div class="col-xs-6">
      Second column
    </div>
  </div>

you can extend the row heights to percentages of the window height.

html {
  height:100%;
}

body {
  height:100%;
  margin:0;
}

.content {
  height:100%;
}

.eighty {
  height:80%;
}

.twenty {
  height:20%;
}

Note how the html, body and .content elements are all set to 100% of the window height.

Upvotes: 0

Related Questions