I'm using Bootstrap 3.3.6 and trying to make my columns (e.g. col-sm-4) "flow", so they could take the whole vertical page space without gaps. I can visualize my problem by following picture: layout with a lot of gaps.
You can see on the given picture that the lower columns and rows are a little misplaced and don't really "flow". What I want to achieve looks like this: wanted layout.
On the following MWE you can experience this effect:
.col-sm-4 {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
float: left;
width: 33.33333333%;
}
.container-fluid:before,
.container-fluid:after {
display: table;
content: " ";
}
.container-fluid:after {
clear: both;
} <div class="container-fluid">
<div class="col-sm-4">
<h2>Lorem</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error, odit cumque totam! Doloremque, culpa, tempore sunt cupiditate nisi pariatur nobis debitis quisquam dolore libero velit laboriosam voluptatum rerum praesentium hic iste voluptates. </p>
</div>
<div class="col-sm-4">
<h2>Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos, officia nemo saepe totam nihil quia nostrum provident amet repellendus neque ut deserunt temporibus unde! Voluptatem, quis, illo, veniam, minus ipsum earum quos autem quidem praesentium impedit obcaecati doloremque vitae esse voluptas cupiditate magnam dolorem blanditiis doloribus facilis eum eligendi architecto recusandae maxime possimus fugiat adipisci ullam aliquid iusto et eaque. </p>
</div>
<div class="col-sm-4">
<h2>Dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos, officia nemo saepe totam nihil quia nostrum provident amet repellendus neque ut deserunt temporibus unde! Voluptatem, quis, illo, veniam, minus ipsum earum quos autem quidem praesentium impedit obcaecati doloremque vitae esse voluptas cupiditate magnam dolorem blanditiis doloribus facilis eum eligendi architecto recusandae maxime possimus fugiat adipisci ullam aliquid iusto et eaque. </p>
</div>
<div class="col-sm-4">
<h2>Sit</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error, odit cumque totam! Doloremque, culpa, tempore sunt cupiditate nisi pariatur nobis debitis quisquam dolore libero velit laboriosam voluptatum rerum praesentium hic iste voluptates. </p>
</div>
<div class="col-sm-4">
<h2>Amet</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio rerum consectetur cumque magni dolorem id cum non ab voluptates. Quia, dolore illum esse harum error impedit magni officiis ipsa ab tempore pariatur provident sapiente architecto fugit
sit sequi amet ratione eaque molestias magnam possimus culpa explicabo. Velit, aspernatur rerum amet odio suscipit enim dolor quam itaque ipsa pariatur earum repellat natus dolore porro dolorem corrupti at. </p>
</div>
</div>You can see, that lower columns fill the vertical space differently, based on which upper column was bigger/smaller. My goal is to use the whole vertical space, without gaps.
P.S. I already used to search the solution on stack overflow, but suddenly without luck: the questions, which on the first look try to solve some problem, solve another problems (here, here and here). This listed solutions haven't helped me.
