What can I do to get the same column heights?

Question

I tried using flex, but still column heights are not same and a few methods mentioned in w3schools and medium but of no use. Using flex method worked for first time but when I refresh again its gone, I don't understand why this is happening.

Is there anything wrong in this code? please help me with this.

<html>
<head>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
    <title>Bootstrap Page</title>
    <style>
        p{
            background:rgba(25,105,25,0.4);
            color:white;
         }
        .row{
            display: flex;
            flex-wrap: wrap;
        }
        .row > .col-md-6 {
            display: flex;
            flex-direction: column;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row display-flex">
            <div class="col-md-6 para1">
                <div>
                    <p>M. Best who informed him that locomotives 
                       could be obtained at a railroad boneyard in Mérida, Yucatán, Mexico, owned by the Ferrocarriles Unidos de Y
                       ucatán..</p>
                </div>
            </div>
            <div class="col-md-6 para1">
                <div>
                    <p> Best who informed him that locomotives 
                            could be obtained at a railroad boneyard in mer, went to Mérida in 1969 to investigate.The development er, went to Mérida in 1969 to investigate.The developme
                        nt of the Walt Disney World Railroad from the late 1960s to its opening in 1971 was overseen by Roger E. Broggie,
                         vice president and general manager of Mapo, Inc</p> 
                </div>
            </div>
        </div>
    </div>
</body>

output image

Column width or column height? Your question title mentions both and your question body mentions neither. — TylerH, Mar 25 '18 at 18:54
You're definitely missing a closing tag for your style declaration for `p` elements... — Alexander Nied, Mar 25 '18 at 18:56
Actually this screenshot is taken before removing few styles applied to paragraph. Thats why a 'p' closing tag is missing. However the problem still continues. — uthej ks, Mar 25 '18 at 19:07
Just use the `h-100` class on the inner divs or `
`. You don't need all the extra flexbox stuff for that. https://www.codeply.com/go/5msONxe8fg — Carol Skelly, Mar 25 '18 at 19:57

hypern00b · Answer 1 · 2018-03-25T19:21:57.673

Here's a slightly cleaned up version. I added borders of different colors to the classes so you could see how things were interacting.

p {
  background-color: rgba(25, 105, 25, 0.4);
  color: white;
  border: 1px solid green;
  box-sizing: border-box;
  padding: 10px;
}

.container {
  border: 1px solid red;
}

.row {
  border: 1px solid blue;
}

.div {
  border: 1px solid orange;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<html>

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
  <title>Bootstrap Page</title>

</head>

<body>
  <div class="container d-flex">
    <div class="row d-flex">
      <div class="col-6 d-flex align-items-stretch">
        <p>M. Best who informed him that locomotives could be obtained at a railroad boneyard in Mérida, Yucatán, Mexico, owned by the Ferrocarriles Unidos de Y ucatán..
        </p>
      </div>
      <div class="col-6 d-flex align-items-stretch">
        <p> Best who informed him that locomotives could be obtained at a railroad boneyard in mer, went to Mérida in 1969 to investigate.The development er, went to Mérida in 1969 to investigate.The developme nt of the Walt Disney World Railroad from the
          late 1960s to its opening in 1971 was overseen by Roger E. Broggie, vice president and general manager of Mapo, Inc
       </p>
      </div>
    </div>
  </div>
</body>

Why use all the extra flexbox classes? Just use `h-100` on the column content. — Carol Skelly, Mar 25 '18 at 20:01

score 0 · Answer 2 · answered Mar 25 '18 at 18:59

Here's an example from my own code you might find useful. This is in an included CSS file, not a "style" section. (this particular code involves ULs that get displayed in columns with boxes around them):

@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,600italic,700,700italic,800,800italic');
@mixin flexbox() {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

@mixin flex($values) {
  -webkit-box-flex: $values;
  -moz-box-flex:  $values;
  -webkit-flex:  $values;
  -ms-flex:  $values;
  flex:  $values;
}

@mixin order($val) {
  -webkit-box-ordinal-group: $val;  
  -moz-box-ordinal-group: $val;     
  -ms-flex-order: $val;     
  -webkit-order: $val;  
  order: $val;
}

body {
    font-family: 'Open Sans', sans-serif;
    padding-bottom: 2em;
    @include flexbox();
}

/* https://css-tricks.com/snippets/css/a-guide-to-flexbox/ */
li.columns {
    @include flex(1 200px);
    @include order(2);
    -moz-display: inline-flex;
    display: inline-flex;
    flex-flow: row nowrap;
    justify-content:space-around;
    align-items: stretch;
    list-style-type: none;
    min-width:60%;
    padding: 0;
    margin: 5px 0px 10px 0px;
    border: 1px solid #17100F;
    font-size:.95em;
}

ul.level2listing li.columns {
    margin-left:-40px;
}

ul.level3listing li.columns {
    margin-left:-80px;
}

li.columns div {
    margin:0;
    padding: 2px;
}

li.columns div.col {
    flex: 1 auto;
    border: 1px solid #17100F;
    padding: 0;
    margin:0;
}

li.columns div.col div {
    padding:auto 4px;
}

li.columns div.col div.xxx {
    font-size:.95em;
}

li.columns .header, table.tablelisting th {
    background: #2d201d;
    color:#ffecdd;
    font-weight: bold;
    margin:0;
    padding: 2px 5px;
}

li.columns .header a, table.tablelisting th a {
    color:#ffdddd;
}

really thank you for this. But it would be much helpful if I get to know why my code is not working.... — uthej ks, Mar 25 '18 at 19:01

score 0 · Accepted Answer · answered Mar 25 '18 at 19:12

0

Your code IS working, but the .col-md-6 are the same height, not the p.

Remove the background-color from the p and add:

.col-md-6 > div {
    height: 100%;
    background:rgba(25,105,25,0.4);
}

https://jsfiddle.net/q2tteygo/4/

answered Mar 25 '18 at 19:12

azeós

4,853
4
21
40

What can I do to get the same column heights?

3 Answers3