Basic centering elements in adaptive row class in bootstrap

Basic centering elements in adaptive row class in bootstrap

On my page I have lots of elements, which I need to show by several in a row in straight columns. Each element is an image of equal size. When you click on it, on it’s place appears icon menu with three items in a row. All elements should be centred horizontally and vertically.
There could be a different number of big images (6, 7, 8 or more) so I want to add them in one row-class.
Now, I think I’m doing everything by bootstrap documentation, but elements logic on the page steel appears to be broken.
What am I doing wrong?
Codepen example

Screenshot of what I get:

Screenshot of what I need:

Please point me in the right direction. Thank you in advance. I was able to done it without bootstrap, b I hope it could be done only by the right usage of bootstrap and elements, because I want to save the adaptive layout.
UPD @LegendaryAks fixed the problem with gap by using

after icons element, but problem of centering all elements for the adaptive layout and unknown number of total elements is still open.
UPD2 Centering just one element in the end is not enough, because we need to know how to center from one to max number of elements on the last row, sow that we could load all the elements on a page with no worry for the last row centering.

Related:  Comparison between Twitter Bootstrap Gems for Rails [closed]

Solutions/Answers:

Solution 1:

There you go i think this did the trick . You can check the demo at http://codepen.io/anon/pen/QybXQJ?editors=100

What i did is I added a div with class clearfix after the fourth div. I hope this is what you are looking for

<div class="clearfix"></div>

Solution 2:

there the solution using only css:

.center-block-big:nth-child(4n+1) {
  clear: left;
}
.center-block-big:last-child {
  margin: 0 auto;
  float: none;
}

the only thing is that in this example i have removed the col-lg-2 to apply it to all resolution, and edited the class name to only apply to the container of the big images and not the twitter ones.

updated codepen


If you want mantain the space on lg resolution you need to play with the col width a bit in this way:

updated codepen


If you have dynamic elements you can use this to make that only if one element is on a row it will be centered:

.center-block-big:nth-child(4n+1) {
  clear: left;
}
.center-block-big:last-child:not(:nth-child(5n)) {
  margin: 0 auto;
  float: none;
}
.center-block-big:nth-child(4n+2),
.center-block-big:nth-child(4n+3),
.center-block-big:nth-child(4n) {
  float: left!important;
}

updated codepen, add .center-block-big elements to see the effect

Related:  Bootstrap: How to enable scroll bars?

Solution 3:

use col-md-12 instead of col-md-6 at the last element of your design.
Try this:

<div class="col-md-12 center-block text-center pagination-centered link">
    <a target="_blank" href="#">VK</a>
</div>

AND

<div class="col-md-12 center-block text-center pagination-centered link">
    <a target="_blank" href="#">FB</a>
</div>

for vertical align use make a new class

.verticalcenter {
    display: inline-block;
    vertical-align: middle;
    float: none;
}

and use it.
make your HTML structure like below:

First Row..
<div class="row center-block text-center">
    <div class="center-block col-md-4">
    </div>
    <div class="center-block col-md-4">
    </div>
    <div class="center-block col-md-4">
    </div>
</div>
Second Row..
<div class="row center-block text-center">
    <div class="center-block col-md-4">
    </div>
    <div class="center-block col-md-4">
    </div>
    <div class="center-block col-md-4">
    </div>
</div>

References