Sokołow Sokołow - 8 months ago 26
CSS Question

Bootstrap: A blank column which isn't in code, but it is in grid

I have a list in bootstrap based on col's. This list is split to 3 columns at one line, like below:

<div class="col-md-4>Sth here, ofc max 12</div><div class="col-md-4>Sth here, ofc max 12</div><div class="col-md-4>Sth here, ofc max 12</div>
<div class="col-md-4>Sth here, ofc max 12</div><div class="col-md-4>Sth here, ofc max 12</div><div class="col-md-4>Sth here, ofc max 12</div>
<div class="col-md-4>Sth here, ofc max 12</div><div class="col-md-4>Sth here, ofc max 12</div><div class="col-md-4>Sth here, ofc max 12</div>
<div class="col-md-4>Sth here, ofc max 12</div>


I am trying to find out why the last column is centered.

I have tried
float: left
and position: options but without success.

*Interesting fact: When I change last col, for example, to
col-md-8
- it isn't centered, but is push to right side. When I change this to
col-md-9
it is on the next line. It looks like before it was invisible
col-md-4

Answer Source

Sorry all Stackoverflow-friends for imprecise question. In the Bootstrap markup I was "something special", with isn't listed in question ;)

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

This class center bootstrap cols next to one - but display: inline-block; has issue. See for example this. So to prevent this they are several method. I'm added a blank comment between div's:

<div class="row">
    <div class="col-xs-6 col-centered">
        Sth
    </div><!--
    --><div class="col-xs-6 col-centered">
        Sth
    </div>
</div>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download