I am trying to make a category page for my website and I need to have all of the columns to match the same height so they will stay where they need to be. Otherwise they will push each other around. I could try to make them exactly the same size based on the content but it doesn't seem to be so easy.
Here is the JSFiddle
<div class="col-md-4 col-sm-6 border">
<div class="content">
<div class="row">
<p>Title of Category</p>
<img id="icon" src="https://upload.wikimedia.org/wikipedia/commons/9/9e/Plus_symbol.svg" />
<br>
<p>
This is text that will most likely break this portion of the grid system. Hopefully not!
</p>
<br>
<button type="button" class="btn btn-primary">Learn More</button>
<br>
</div>
</div>
</div>
I am trying to get them to level off. This is a basic version that I drew up for an example. I have another issue with the bootstrap borders to be only on adjacent cells that are near each other. This one just shows all borders. But I just need the content in each of the bordered items to be the same height and not push one another to the next line or congregate in the space to the side of the biggest first item. Someone has to have had the same setup that I am trying to do. It should be 3 items per row when it is the biggest and then go down to 2 per column and then down to 1 per column.
It would be great to just have some sort of solution in javascript. I would attempt that but I'm not very versed in it. If someone has a simple solution in either javascript or just plain CSS then please help! This has to have been done before!
By adding min-height to border class will solve your problem.
.container .row .border {
text-align: center;
border: 1px solid #ddd;
padding: 20px;
min-height: 250px;
}