How to organize many divs in Bootstrap (Image)

Well, on the margin between the div's, just change the CSS on your page by changing the margin.

.col-md-3{
  margin: 0 5px 5px 0;
}

In terms of size, I do not think you know the size of each text to set min-heigth of the page, so I recommend using jQuery to get the largest size of each div and set heigth equal for all. It would look something like this:

 $(document).ready(function() {
   var maxHeight = -1;

   $('.col-md-3').each(function() {
     maxHeight = maxHeight > $(this).height() ? maxHeight : $(this).height();
   });

   $('.col-md-3').each(function() {
     $(this).height(maxHeight);
   });
 });

See an example working on JsFiddle.

References: Use jQuery / CSS to find the tallest of all elements.

If you want to change the size in blocks, you can separate the value of maxHeigth in each block, like this:

$(document).ready(function() {
   var maxHeight = -1;

      $('.row').each(function() {

       $(this).find('.col-md-3').each(function() {
         maxHeight = maxHeight > $(this).height() ? maxHeight : $(this).height();
       });

       $(this).find('.col-md-3').each(function() {
         $(this).height(maxHeight);
       });

   });
 });

Functional example in JsFiddle .

You can set a maximum fixed height for the elements, in your case there, the items are crowding because there are some with height greater than the other. If you put the height of the class="col-sm-3" in that case then in 200px for example by default, it will solve the problem!

You can do a PHP, creating a sum before listing each list, if the sum is = 4 which is the amount of Li per line, plays a clearfix div and zeros the sum to redo, another tip is to use the mansory , have you heard of it? follows a few links, it adjusts the Li: link link

If you want to follow the example in php, play the code in the plunker that I help you with!

The best way is with the "row" class