8

I am new to BootStrap so learning the ropes and understanding it. I am trying to acheive 100% height in column grid so that it covers 100% height of the page. Right now no height is set. When I try to specify the height of both columns col-lg-9 and col-lg-3 in pixels or % no change occurs. Don't know what might be the problem. Here is the basic structure I am using

<body>
<div class="row">
"Top bar"
</div>
 <div class="container">
       <div class="row">
        <div class="col-lg-3">
side bar
</div>

 <div class="col-lg-9">
side bar
</div>

</div>

And here is the css for each item

@media (min-width: 1200px)
.container {
max-width: 1170px;
}
.row {
margin-bottom: 20px;
}
.col-lg-9 {
width: 75%;
padding: 10px 20px;
border-radius: 0 10px 10px 0;
-moz-border-radius: 0 10px 10px 0;
-webkit-border-radius: 0 10px 10px 0;
-o-border-radius: 0 10px 10px 0;
border: 0 none;
padding-top: 3%;
min-height: 90%;
}
.col-lg-3 {
width: 25%;
background-color: #192D38;
color: #88A7A9;
min-height: 90%;
}
Mironline
  • 2,755
  • 7
  • 35
  • 61
Ahmar Ali
  • 541
  • 2
  • 7
  • 21

1 Answers1

18

try this:

html,body
{
  height: 100%;
}

If that doesn't work, then use inspect element, and verify that parent elements have 100% height. (Because if they don't - then child elements won't get 100% height unless they are position:absolute or position:fixed

Danield
  • 121,619
  • 37
  • 226
  • 255
  • 1
    that doesn't work I have set height to all elements html,body,container,row and then columns but doesnt work – Ahmar Ali Jul 29 '13 at 10:04
  • @AhmarAli I just used inspect element and added 100% on html,body container, and row - and it DID work. However when you apply 100% height on the row - don't add it to the row class but rather to element.style or else EVERY row will get 100% height! – Danield Jul 29 '13 at 10:10
  • @Danield can you please check now. I have added the height:100% to indiviudlal row and the col-lg-3 column but the column's height still is the same – Ahmar Ali Jul 29 '13 at 10:15
  • @AhmarAli put height:100% on container and row (not [just] min-height) – Danield Jul 29 '13 at 10:21
  • @Danield Ok it works Daniel. Thanks a lot. Any idea how to move the footer to the bottom and text of footer in center? – Ahmar Ali Jul 29 '13 at 10:26
  • move the markup of the footer to the end and give it text-align:center – Danield Jul 29 '13 at 10:27