-1

I am wondering how I can make a column in bootstrap to be full page height no matter what. I have currently tried making an id and setting the height to 100%, but I have had no luck.

<div id="main-row" class="row">
 <div id="left" class="col-lg-3">
   TEXT
 </div>
 <div id="center" class="col-lg-3">
  TEXT
 </div>
 <div id="right" class="col-lg-3">
   TEXT
 </div>

This is an example of what I have tried. All I want to achieve is to set the entire column to be the entire height of the page. It currently locks to content height. Is there any way around this?

Rob
  • 14,746
  • 28
  • 47
  • 65
Walter White
  • 21
  • 1
  • 3
  • 5
    Possible duplicate of [Twitter bootstrap 3 two columns full height](http://stackoverflow.com/questions/19089384/twitter-bootstrap-3-two-columns-full-height) – Ricardo Pontual Jun 01 '16 at 17:15
  • One thing you can address right away (unrelated to your question) is that you are not paying attention to the rules of the grid. By default the grid is 12 columns, so you need to use `col-lg-4` to divide it into 3 – Jonathan Jun 01 '16 at 17:15
  • That's my bad on copy and pasting, I've used a 3 a 6 and another 3 – Walter White Jun 01 '16 at 17:16

1 Answers1

0

You will need to use CSS to set the height.

First, you need your body to be 100%. Then I would put the columns in a containing div and set that to be 100% (looks like main-row is the containing div). Then if you want only select columns to extend to the full height, give them an class that has 100% set as height.

You can try setting the css to this.

.html, body {
   height:100%;
}
#main-row {
   height:100%;
}
.fullheightcol {
   height: 100%;
}

HTML:

<div id="main-row" class="row">
   <div id="left" class="col-lg-3">
   TEXT
   </div>
   <div id="center" class="col-lg-6 fullheightcol">
      TEXT 
   </div>
   <div id="right" class="col-lg-3">
      TEXT
   </div>
</div>
DMort
  • 347
  • 1
  • 2
  • 10