0

i am writing a bootstrap code, inside columns i have defined div with background color but, background color roll till content only and due to data variation so, it look uneven data some columns taller and some smaller. I opted this approach because i need spacing between columns so, that it should look like cards with rounded edges. how can i have same height of column. 

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-xl-2">
  <div class="rounded" style="background-color:aqua">
    <span>some text here</span>
  </div>
</div>
<div class="col-xl-2">
  <div class="rounded" style="background-color:pink">
    <span>some text here</span>
    <p>some more text</p>
    <p>some more text</p>
  </div>
</div>
<div class="col-xl-2">
  <div class="rounded" style="background-color:green">
    <span>some text here</span>
    <p>some more text here</p>
    <h5>extra work</h5>
  </div>
</div>
</div>
</div>
manpreet
  • 81
  • 1
  • 12

2 Answers2

0

Basically this is a duplicate.

The columns are the same height because Bootstrap 4 uses flexbox. Just add h-100 (height:100%) to the rounded containers to that the fill the height of the columns.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col">
  <div class="rounded h-100" style="background-color:aqua">
    <span>some text here</span>
  </div>
</div>
<div class="col">
  <div class="rounded h-100" style="background-color:pink">
    <span>some text here</span>
    <p>some more text</p>
    <p>some more text</p>
  </div>
</div>
<div class="col">
  <div class="rounded  h-100" style="background-color:green">
    <span>some text here</span>
    <p>some more text here</p>
    <h5>extra work</h5>
  </div>
</div>
</div>
</div>
Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
  • basically i have tried giving height 100% what happened when we switch to ipad pro test mode all column expand till screen end with blank column. – manpreet Apr 30 '20 at 13:38
  • Then why are you using `xl`? Do you want them not to stack vertically? – Carol Skelly Apr 30 '20 at 13:41
  • I am using it in both directing landscape mode and portrait mode. – manpreet Apr 30 '20 at 14:04
  • I dont understand what the problem/question is. You asked how to get full height columns which has been answered. There's nothing in your question about mobile/ipad, etc... – Carol Skelly Apr 30 '20 at 14:08
0

From what I understand of your problem, you want all the .col to be the same height...

Adding CSS property of height: 150px; (enter whatever size you'd like) to the .col. However, if you want the background to be the entire background of the .col, you need to move that to that .col div element (where I put blue and orange).

P.S. the blue and orange is just to show you the height of each .col

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-xl-2" style="height: 150px; background-color: orange;">
  <div class="rounded" style="background-color:aqua">
    <span>some text here</span>
  </div>
</div>
<div class="col-xl-2" style="height: 150px; background-color: blue;">
  <div class="rounded" style="background-color:pink">
    <span>some text here</span>
    <p>some more text</p>
    <p>some more text</p>
  </div>
</div>
<div class="col-xl-2" style="height: 150px; background-color: orange;">
  <div class="rounded" style="background-color:green">
    <span>some text here</span>
    <p>some more text here</p>
    <h5>extra work</h5>
  </div>
</div>
</div>
</div>
Jeff Berlin
  • 590
  • 6
  • 17
  • any technical or coding based approach because it's hard coded methood. – manpreet Apr 30 '20 at 13:38
  • You could assign another classname to the column div's and add CSS to them all at once (`.foobar {height: 150px;}`). If my solution and the other one from @codeply-er aren't what you're looking for, then I'm really not sure I understand what solution you want. – Jeff Berlin Apr 30 '20 at 13:46
  • Oh i am already implementing height funda with measuring tallest column and keep same for other two. I was just wondering if i am missing any tailor made bootstrap class which will do the magic :) – manpreet Apr 30 '20 at 14:03