Bootstrap 3 Five column responsive with fixed height and width

Question

I am trying to make a 5 column responsive layout in bootstrap 3 but the box automatically expands based on the content actually i need a fixed width and height for all 5 box so everything stays in the box i tired all code and reference in stackoverflow

And below you can find the HTML & CSS Code

Please check the output of the code in fullpage

 @media (min-width: 768px) { .ten-columns > .col-sm-2 { width: 20%; } } .card-box { padding: 20px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); -webkit-border-radius: 3px; border-radius: 3px; -moz-border-radius: 3px; background-clip: padding-box; margin-bottom: 20px; background-color: #ffffff; } .widget-box-one .widget-one-icon { position: absolute; right: 30px; font-size: 72px !important; top: 0; color: #f3f3f3; overflow: hidden; vertical-align: middle; line-height: 2 !important; } .widget-box-one .wigdet-one-content { position: relative; } 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class="row ten-columns text-center"> <div class="col-sm-2"> <div class="card-box widget-box-one"> <div class="wigdet-one-content"> <p class="m-0 text-uppercase font-600 font-secondary text-overflow">One</p> <img style="width:90px" src="https://i.imgur.com/kspWJKK.png"> </div> </div> </div> <div class="col-sm-2"> <div class="card-box widget-box-one"> <div class="wigdet-one-content"> <p class="m-0 text-uppercase font-600 font-secondary text-overflow">Stat</p> <h2 class="text-danger"><span data-plugin="counterup">I am just a dummy text with max 35 characters</span></h2> </div> </div> </div> <div class="col-sm-2"> <div class="card-box widget-box-one"> <div class="wigdet-one-content"> <p class="m-0 text-uppercase font-600 font-secondary text-overflow">SPD</p> <h2 class="text-dark"><span data-plugin="counterup">22</span> </h2> </div> </div> </div> <div class="col-sm-2"> <div class="card-box widget-box-one"> <div class="wigdet-one-content"> <p class="m-0 text-uppercase font-600 font-secondary text-overflow">D-Goal</p> <h2 class="text-success"><span data-plugin="counterup">12</span></h2> </div> </div> </div> <div class="col-sm-2"> <div class="card-box widget-box-one"> <div class="wigdet-one-content"> <p class="m-0 text-uppercase font-600 font-secondary text-overflow">B-Level</p> <img style="width:90px" src="https://i.imgur.com/kspWJKK.png"> </div> </div> </div> </div> 

Answer 1

You can Use flex display and set height:100% to .card-box

.ten-columns{
/*its like Bootstrap 4*/
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
@media (min-width: 768px) {
.ten-columns > .col-sm-2 {
-webkit-box-flex: 0;
-ms-flex: 0 0 20%;
flex: 0 0 20%;
max-width: 20%;
}
}
.card-box {
/*add height:100% to .card-box*/
height: 100%;
}

Answer 2

I recently had the same problem. I solved my problem with this

Changed row width to 240%. As in bootstrap row consists of 12 columns, so to fill the same width (of 12 columns) increased the size of row (12/5 = 2.4).

There is a little problem here that the scrollbar is visible but is not visible in my .fluid-container and this can be solved.

 @media (min-width: 768px) { } .card-box { padding: 20px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); -webkit-border-radius: 3px; border-radius: 3px; -moz-border-radius: 3px; background-clip: padding-box; margin-bottom: 20px; background-color: #ffffff; } .widget-box-one .widget-one-icon { position: absolute; right: 30px; font-size: 72px !important; top: 0; color: #f3f3f3; overflow: hidden; vertical-align: middle; line-height: 2 !important; } .widget-box-one .wigdet-one-content { position: relative; } 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class="row ten-columns text-center" style="width: 240%"> <div class="col-md-1 col-xs-1"> <div class="card-box widget-box-one"> <div class="wigdet-one-content"> <p class="m-0 text-uppercase font-600 font-secondary text-overflow">One</p> <img style="width:90px" src="https://i.imgur.com/kspWJKK.png"> </div> </div> </div> <div class="col-md-1 col-xs-1"> <div class="card-box widget-box-one"> <div class="wigdet-one-content"> <p class="m-0 text-uppercase font-600 font-secondary text-overflow">Stat</p> <h2 class="text-danger"><span data-plugin="counterup">I am just a dummy text with max 35 characters</span></h2> </div> </div> </div> <div class="col-md-1 col-xs-1"> <div class="card-box widget-box-one"> <div class="wigdet-one-content"> <p class="m-0 text-uppercase font-600 font-secondary text-overflow">SPD</p> <h2 class="text-dark"><span data-plugin="counterup">22</span> </h2> </div> </div> </div> <div class="col-md-1 col-xs-1"> <div class="card-box widget-box-one"> <div class="wigdet-one-content"> <p class="m-0 text-uppercase font-600 font-secondary text-overflow">D-Goal</p> <h2 class="text-success"><span data-plugin="counterup">12</span></h2> </div> </div> </div> <div class="col-md-1 col-xs-1"> <div class="card-box widget-box-one"> <div class="wigdet-one-content"> <p class="m-0 text-uppercase font-600 font-secondary text-overflow">B-Level</p> <img style="width:90px" src="https://i.imgur.com/kspWJKK.png"> </div> </div> </div> </div> 

Answer 3

  var minHeight = parseInt(0);
                $(".tens-columns > div").each(function(){
                    if($(this).outerHeight() > minHeight){
                        minHeight = $(this).outerHeight();
                    }
                });

            $('.tens-columns > div').css('height', minHeight);
            }