How to align simple blocks in Boostrap?

Question

Bootstrap

I created a layout prototype in PS and wondered how to typeset it later.
Here are a few blocks, if they are placed on a grid, then a large indent appears between them, which spoils the view.
If the blocks are moved towards each other, then we stop following the grid.
I have two ideas so far:
-Reconcile -Do
not use Boostrap on this page, but write adaptability yourself.
Not one option suits me. What would you do?

Answer 1

There are many solutions, but I would do this: .row => two .col-*-6, each of which has a .row with a grid of 12, that is, in total we get a grid of 24, and it will already give twice as much accuracy.
However, keep in mind that the Bootstrap grid will not allow you to make the blocks the same height if necessary - look towards other grids, flexbox is mainstream now.