CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
Alex197
Alex197

Reputation: 923

Bootstrap 3 cols same height (only CSS)

I have a list of products on a prestashop website using Bootstrap 3. All products have names and descriptions of different lenght.

The problem is that if they are not the same size there is an offset.

How could I set the same height for each line from the .row ?

I would like to align all border-bottom

Link to my Fiddle

*Do not take into account JavaScript, it's just used to generate HTML.

function gen() {
  var text = "";
  var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

  for(var i = 0; i < 15; i++)
    text += possible.charAt(Math.floor(Math.random() * possible.length));

  return text;
}

for(var i=0;i<=20;i++){
  var e = $(".ajax_block_product").first().clone();
  e.find(".title").text(gen()+" "+gen()+" "+gen());
  $(".row").append(e);
}
img{width:50%;}

.ajax_block_product {
    border-bottom: 1px solid #f00;
    position: relative;
    padding: 20px;
    text-align: center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="row">
  <div class="ajax_block_product col-xs-12 col-sm-6 col-md-4">
    <img src="http://bioritmefestival.org/wp-content/uploads/2017/11/img-test.png">
    <div class="title">Item name</div>
  </div>
</div>

Thanks

Upvotes: 2

Views: 216

Answers (2)

Joykal Infotech
Joykal Infotech

Reputation: 1876

Please add below CSS code in your css file:

.row {
 display: -webkit-flex;
 display: -moz-flex;
 display: -ms-flex;
 display: flex;
 flex-wrap: -webkit-wrap;
 flex-wrap: -moz-wrap;
 flex-wrap: -ms-wrap;
 flex-wrap: wrap;
}

Upvotes: 3

elveti
elveti

Reputation: 2376

Use this CSS

.row {
  display: flex;
  flex-wrap: wrap;
}

In Bootstrap 4 you could just add the classes d-flex flex-wrap but in Bootstrap 3 this in not available yet

Upvotes: 3

Related Questions