Why are these columns not taking defined width and height to fit the screen using Bootstrap

Question

I just started using Bootstrap for a project, I need three columns on top and three columns in bottom, the first three column should occupy 50% of screen height and rest 50% by other three columns...all in one screen

I have made used of viewport height and viewport width, as mentioned in the comments..

In codepen it looks fine, but in local browser, its giving me horizontal scrolling, also the small part of the content on the left column are hiding from the screen.

<http://codepen.io/neeraj8392/pen/OVVwEY>

height percentages are relative only to their immediate parent... Add some code please .. — Pogrindis, May 01 '15 at 14:55
Your question might have been answered already, take a look at: http://stackoverflow.com/questions/15843391/div-height-set-as-percentage-of-screen — Jako, May 01 '15 at 14:58
Thank you for your response an guidance, I can add the code here directly??? Please guide me through....I will be more careful with my questions from next time — neeraj8392, May 02 '15 at 06:33
This might sound stupid, but how shall i include my files to be posted here??? Shall i need to make use of codepen??? please suggest — neeraj8392, May 02 '15 at 06:46

jbutler483 · Answer 1 · 2015-05-01T15:16:30.510

You should look to use vh and vw units, rather than % in this case.

The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly. However, when the value of ‘overflow’ on the root element is ‘auto’, any scroll bars are assumed not to exist. Note that the initial containing block's size is affected by the presence of scrollbars on the viewport. ~ w3.org

For example,

html,
body {
  margin: 0;
  padding: 0;
  font-size: 0;
}
.item {
  height: 50vh;
  white-space: 0;
  width: 32vw;
  margin: 0;
  background: tomato;
  display: inline-block;
  font-size: initial;
  transition: all 0.6s;
}
.item:hover {
  background: cornflowerblue;
}

<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>

will always fill the screen size, no matter what size it is.

You may note that I have set font-size to 0, and then 'initial' in my .item class. This is to 'fix' the margin that is generated via inline block elements.

you also need to ensure there is no whitespace between your elements, as they will be taken as an actual space in your html.

Robert McKee · Answer 2 · 2015-05-01T16:41:40.177

Since you can't make 3 columns exactly the same width because 100 isn't divisible evenly by 3, I made the middle column just slightly wider (.001%).

html,
body {
  margin: 0;
  padding: 0;
  font-size: 0;
  overflow:hidden;
}
#grid > div {
  height: 50vh;
  width: 33.333vw;
  margin: 0;
  display: inline-block;
  font-size: 16px;
}
#grid > div:nth-child(3n+2) { width: 33.334vw; }
#grid > div:nth-child(1) { background: brown; }
#grid > div:nth-child(2) { background: green; }
#grid > div:nth-child(3) { background: pink; }
#grid > div:nth-child(4) { background: purple; }
#grid > div:nth-child(5) { background: blue; }
#grid > div:nth-child(6) { background: orange; }

<div id="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

Why are these columns not taking defined width and height to fit the screen using Bootstrap

2 Answers2