I am not able to set height to my column in Bootstrap grid system

Question

I am leaning Angular 4 and I am creating an app with Bootstrap , I am using the grid system, but I am not ale to set any height to the columns of the grid. I have tried all solutions available on internet setting overflow to hidden at container and then setting clear : both on column. Not able to make it work

<div class="container" >
<div class="row">
<div class="col-lg-12" style="background-color:aqua">
 Column 1
</div>
</div>
<div class="row">
<div class ="col-lg-12" style="background-color:blueviolet">
 Column 2
</div>
</div>
</div>



.container{
height: 90%;
overflow:hidden;
}
.row{
height:25%;
clear: both;
}
.col-lg-12{
height:100%;
clear:both;
}

JsFiddle link link

Please let me know!!!

The JS Fiddle link is to a blank fiddle. – Top-Bot Jan 07 '18 at 19:42 — Top-Bot, Jan 07 '18 at 19:42

score 0 · Answer 1 · answered Jan 07 '18 at 20:21

0

The problem is that you are trying to set height with percentage.

The height of a block element (div is a block element) depends on the height of the content.

If you specify a percentage, that will always respect the height of the content, no matter what.

Change the height to pixels and you will control the height of the element.

See this answer for more information

.container {
    display: inline-block;
    width: 100%;
    height: 100%;
    margin: auto;
    overflow:hidden;
}

.row {
    overflow:hidden;
    width:100%;
    height:25%;
}

.col-lg-12 {
    float: left;
  width: 10%;
  height: 350px; -> height in pixels, not in percent
  clear: both;
}

answered Jan 07 '18 at 20:21

rbenvenuto

2,415
2
12
20

But i want it to be responsive – Punit Jan 07 '18 at 20:30
Then you will have to give those divs a specific class name only for controlling the height in media queries. – rbenvenuto Jan 07 '18 at 21:01
It's not a good idea to target Bootstrap native classes on your css. – rbenvenuto Jan 07 '18 at 21:03

scaffolding · Answer 2 · 2018-01-08T00:13:40.277

Does defining the height of a parent container work? (Using vh units to define its height, as illustrated below, should make it responsive.)

It's hard to tell from this snippet but in your full code, do you define the height of an element that contains the .container div? If not, the 90% that you've set as .container's height won't work, because there won't be a defined context for exactly what you're using to create your height: 90%.

If you add the height to your parent element -- and you can see this in play in this example on Codepen: https://codepen.io/msummers40/pen/EobqOo -- things take on more definition/greater heights. On that Codepen page, I just added a new parent element and a corresponding CSS selector:

.container-of-container {
  height: 100vh;
  width: 100%;
}

With the .container-of-container div's height set to 100vh, .container's height becomes 90% of that. In turn, your two rows are each 25% of .container's height.

In any case, if you set the height (using px, em, vh etc) of the parent element of .container, you should see the resizing take place more as you're expecting.

I am not able to set height to my column in Bootstrap grid system

2 Answers2