1

Please read my question before marking duplicate

I have bootstrap container in which i have few columns. I want to fix same height for all div.

What i got is this, however it will break the structure while resizing means not use full with responsiveness.

I know there are 2 main solution for them :

1. Flex
2. Table/table-cell

But both are not useful for me. I have also used overflow:hidden and margin-bottom: -99999px;padding-bottom: 99999px; solution but not useful for me.

Solution i have tried : This, this, and this but none of them is useful for me.

I have simply created fiddle(by some answer) but when i try to use the same way in my fiddle then its not giving the same output, don't know why.

I have read this tutorial and went through this too to know more about flex but none of them is useful for me.

So my final fiddle is this. Please check this one and let me know how can i make it responsive while keeping same height.

css

 .bg-gray {
    color: #666;
    background: #efefef;
}
.mrg10T {
    margin-top: 10px !important;
}
.mrg10A {
    margin: 10px !important;
}
.csT
{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;

}
.csT div div{height:100%;}

Html

<div class="row mrg10T csT">
        <div class="text-left col-md-4 thisclass">
        <div class="row bg-gray pad5A mrg10A">
            <div class="col-md-6 col-sm-6 col-xs-6 font-bold">Current subscription</div><div class="col-md-6 col-sm-6 col-xs-6">: Student Demo</div>
        </div>  
       </div>
       <div class="text-left col-md-4 thisclass">
        <div class="row bg-gray pad5A mrg10A">
            <div class="col-md-6 col-sm-6 col-xs-6 font-bold">Start date</div><div class="col-md-6 col-sm-6 col-xs-6">: 1st-Jan-2016</div>
        </div>  
       </div>
       <div class="text-left  col-md-4 thisclass">
        <div class="row bg-gray pad5A mrg10A">
            <div class="col-md-6 col-sm-6 col-xs-6 font-bold">Expiry date</div><div class="col-md-6 col-sm-6 col-xs-6">: 31st-Dec-2016</div>
        </div>  
       </div>
       <div style="clear:both;">

       </div>
       </div>
       <div class="row mrg10T csT">
       <div class="text-left col-md-4 thisclass">
        <div class="row bg-gray pad5A mrg10A">
            <div class="col-md-6 col-sm-6 col-xs-6 font-bold">Renewal pricing</div><div class="col-md-6 col-sm-6 col-xs-6">: $100</div>
        </div>  
       </div>
       <div class="text-left col-md-4 thisclass">
        <div class="row bg-gray pad5A mrg10A">
            <div class="col-md-6 col-sm-6 col-xs-6 font-bold">Offers 1</div><div class="col-md-6 col-sm-6 col-xs-6">: 20% cash incentive (will be credited to your account)</div>
        </div>  
       </div>
       <div class="text-left  col-md-4 thisclass">
        <div class="row bg-gray pad5A mrg10A">
            <div class="col-md-6 col-sm-6 col-xs-6 font-bold">Renewal pricing</div><div class="col-md-6 col-sm-6 col-xs-6">: $100</div>
        </div>  
       </div>
       <div style="clear:both;">

       </div>
    </div>
Community
  • 1
  • 1
Leo the lion
  • 3,164
  • 2
  • 22
  • 40
  • 1
    Regardless of how many rows, all should be same height? ... If yes, then script is needed, as flexbox nor table can do that. – Asons Dec 09 '16 at 16:47
  • 2
    You can scratch flexbox off your list of possible solutions. Flex equal height columns only work between siblings on the same line. Once an item wraps, a new shared height is established for that line. @LGSon is correct in my view. You're going to need JS. Here's more on the flex limitation: http://stackoverflow.com/q/36004926/3597276 – Michael Benjamin Dec 10 '16 at 05:07
  • Thanks for your comment. I read, linked ones too + comments, and I asked, before I closed, so I don't just hammer every question. You ask _how can i make it responsive while keeping same height...without js/overflow_ and the answer is in the dupe, which is, simply put, _you can't_. Note, a dupe does not necessarily mean the question asked is the same, it means the given answers can be applied. Now, instead of telling that I did wrong, explain why it is not a dupe, and I will be able to reconsider, and open it again. – Asons Dec 12 '16 at 13:51
  • _if some one says that you can't do doesn't mean there is no way_, ...correct, and the way today is using script. If someone figures this one out later on, when new features arrive to CSS, they are able to add an answer to the duplicate, which then you and everybody else can benefit from, and that is the way it works here at SO, so please don't look at it in any other way. – Asons Dec 14 '16 at 16:02

1 Answers1

0

Does this work for you..

  .csT
{
    display: inline;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
}

.csT div div{height:100%;}
.thisclass{height:100px;}

DEMO https://jsfiddle.net/norcaljohnny/jeaxycv8/2/

norcal johnny
  • 2,050
  • 2
  • 13
  • 17