Bootstrap 3 and different grid layout - css

Question

I'm a super, super noob and need your help.
What I'm trying to achieve is layout kinda flexible in a column but still in rows, like on a picture below, there are 3 rows, each in a different color. I tried 3 rows as well as 1 row, doesn't make a difference.
Ok, so I got 9 columns, each one takes 4 spaces. And I tried to move the middle picture in a green row to the middle column of the pink one. Didn't work out, I mean it did but the other pictures got messed up. I also tried the .clearfix.
Hope you can help guys, cheers!

Answer 1

What you are trying to achieve is called a Masonry Layout.
You cannot distribute your layout by rows, you have to do it using columns.
Everything should be inside a .row div, and have the number of columns you need (in your image case, you need to use .col-md-4).
Then you should add everything to those three columns dynamically, using Javascript or the technology you are using (you can achieve it also on PHP or so on, I'll edit if you need help on that).
Also, I recommend you using Bootstrap 4, as it contains a new feature called Cards Columns which is designed for what you are trying to achieve:
https://v4-alpha.getbootstrap.com/components/card/#card-columns

Answer 2

Bootrstap has different classes to achieve this.
Primarily,
<div class="row">
And
<div class="col">
The row class defines the row, and the col class defines the column.
You specify the columns by col-1, col-2, col-3 as an example, all the way up to col-12. If you don't defined the col size, it will automatically fill out as much space as possible, up the size of col-12.
There are tons of nested classes to alter the behavior as well, such as text placement within the elements etc.
This row and column system is also fully responsive.
Read more here.
If you can't achieve the desired result by using bootstrap rows and cols,
try using flexbox instead. More info here.

Answer 3

you can use the nav bar for the upper position but bootstrap doesnt provide classes to break the columns into rows rather it provides to break the rows into columns only.you have to use html css and jquery here.

Answer 4

You won't be able to align top->bottom fashion with bootstrap. The only method I could find which can provide appealing result is the DeSandro's masonry library (https://masonry.desandro.com/) if you are restricted to Bootstrap 3. In case you can use Bootstrap 4 cards (card columns) can provide some features or you can also look at isotope by DeSandro.
But staying with the mentioned masonry plugin:
<div class="container">
<div class="my-card col-lg-4 col-md-4 col-sm-4">
Content 1
</div>
<div class="my-card col-lg-4 col-md-4 col-sm-4">
Content 2
</div>
<div class="my-card col-lg-4 col-md-4 col-sm-4">
Content 3
</div>
<div class="post-box col-lg-4 col-md-4 col-sm-4">
Content 4
</div>
<div class="post-box col-lg-4 col-md-4 col-sm-4">
Content 5
</div>
<!-- ... -->
</div>
and JavaScript:
$(document).ready(function() {
var $container = $('.container');
$container.masonry({
itemSelector: '.my-card',
columnWidth: '.my-card',
transitionDuration: 0
});
});