Columns with the same height in Bootstrap

Navigation
3

I have some columns each with a content, however as some have more content than others are higher and in general it looks ugly, is there any way to equal them all so they have the same height? I tried to class them that was height:100% but it does not work or I do not know if I put it on what it was.

This is my code: 

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col-xs-12 text-center">
    <h2 class="text-orange">Nuestros Servicios</h2>
    <hr class="second">
  </div>
  <div class="col-xs-12 col-md-3">
    <div class="thumbnail thumb-shadow">
      <img src="img/comunication.png" alt="Plataformas Customizables">
      <div class="caption">
        <h3>Comunicación, Análisis y apoyo</h3>
        <p class="text-justify">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum sint aperiam illum, sapiente et delectus iusto suscipit sed debitis rem error repellat. Corrupti eius voluptatum voluptatibus enim quasi autem! Nesciunt voluptatibus amet adipisci dolore ullam dicta numquam maxime eos soluta perferendis animi earum quidem, saepe. Repellendus, nostrum, sapiente. Tempore recusandae, rem accusamus, veritatis adipisci quibusdam eum at voluptate tempora eaque error odit eligendi autem sint consequatur sed similique, commodi quasi?
        </p>
        <button class="btn btn-danger">Saber más.</button>
      </div>
    </div>
  </div>
  <div class="col-xs-12 col-md-3">
    <div class="thumbnail thumb-shadow">
      <img src="img/custom-web.png" alt="Plataformas Customizables">
      <div class="caption">
        <h3>Plataformas a la medida</h3>
        <p class="text-justify">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam error eum placeat deleniti animi magnam architecto quidem praesentium maiores alias sequi cum libero omnis nam optio asperiores dignissimos officia aut aliquam, aspernatur sunt fugiat! Commodi quasi dignissimos eos, voluptas debitis repellat magni. Eveniet minima debitis neque! Cum quaerat ducimus, corporis et nemo animi delectus nobis.
        </p>
        <button class="btn btn-danger">Saber más.</button>
      </div>
    </div>
  </div>
  <div class="col-xs-12 col-md-3">
    <div class="thumbnail thumb-shadow">
      <img src="img/responsive-icon.png" alt="Diseño Responsivo">
      <div class="caption">
        <h3>Diseño Web a la vanguardia</h3>
        <p class="text-justify">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti sequi fugiat eum doloremque odit cumque dolores nobis quia voluptas tempora! Pariatur placeat distinctio itaque eius impedit natus suscipit, dignissimos culpa?
        </p>
        <button onclick="alr()" class="btn btn-danger">Saber más.</button>
        <div id="ntf"></div>
      </div>
    </div>
  </div>
  <div class="col-xs-12 col-md-3">
    <div class="thumbnail thumb-shadow">
      <img src="img/document-code.png" alt="Código Documentado">
      <div class="caption">
        <h3>Documentación y enseñanza</h3>
        <p class="text-justify">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex, iste accusamus corporis amet repellat ullam quod, quas magni, vitae in, necessitatibus dolorum esse temporibus hic inventore voluptas saepe at officia aliquid. Voluptates sed nam aperiam, sapiente non expedita ipsa laborum commodi!
        </p>
        <button class="btn btn-danger">Saber más.</button>
      </div>
    </div>
  </div>
</div>
    
asked by Andress Blend 31.01.2017 в 18:52
source

2 answers

3

What happens is that when you use columns in Bootstrap , they do not measure their height depending on the others.

There are several solutions:

Edit: I found a faster and better solution that works pretty well with FlexBox : To the parent ( row ), add the property of display: flex; . With that the other div inside will have all the same height , but you will only have to include in the parent ( row ) the div that you want to have the same height (separate the title of that div ) and additionally, to achieve the visual effect that you want the direct children to give the border ( col- ) or the inner content to do it at the maximum height of this, since the children ( -col ) are those that are affected by the height equalization.

With Javascript , measure the height of the highest column inside the parent and store it in a variable and assign it with CSS (a class) to the rest of the div . 

$( document ).ready(function() {
    var heights = $(".well").map(function() {
        return $(this).height();
    }).get(),

    maxHeight = Math.max.apply(null, heights);

    $(".well").height(maxHeight);
});

Foundation is a Framework just like Bootstrap that has a script called equalizer , which matches the columns as you need it, following the method of the previous solution.

There is also a variant equalizer for Bootstrap created by users.

I'll leave the thread where he discusses it in StackOverflow in English :

link

    
answered by 01.02.2017 в 19:45
0

Depending on your project, you could use only the height:200px property, for example, to set the exact size of each column. If the content exceeds it, you could use: 

overflow:auto;
overflow:-x;

That will show a vertical scroll.

    
answered by 20.02.2017 в 23:36
List assignments Send variables $ _POST [] with header ("location: URL");