Rik Rik - 2 months ago 10
CSS Question

Bootstrap collumns not centering

I want to center 4 extra small bootstrap columns next to each other.

But when I do that it just doesn't center them.

I tried to center them with the

margin: 0 auto;
method but that didn't work.

I also tried
text-align: center;
but that also didn't work.

And also the built in
center-text
class in bootrstrap.

I tried all of these methods on all the parent divs.

This is what it is right now:

Current

And this is what I want:

Outcome

This is my code right now:

<div class="gallery-filter">
<div class="row">
<div class="col-xs-2">
<p>
All
</p>
</div>
<div class="col-xs-2">
<p>
Area
</p>
</div>
<div class="col-xs-2">
<p>
Resort
</p>
</div>
<div class="col-xs-2">
<p>
Rinjani
</p>
</div>
</div>
</div>

.gallery-filter > .row {
margin-right: 0px !important;
}

.gallery-filter {
width: 100%;
margin: 0 auto;
text-align: center;
text-transform: uppercase;
}

Answer

Try bootstrap text-center class:

<div class="col-xs-3 text-center">
     <p>
         All
     </p>
</div>
<div class="col-xs-3 text-center">
     <p>
         Area
     </p>
</div>
<div class="col-xs-3 text-center">
     <p>
         Resort
     </p>
</div>
<div class="col-xs-3 text-center">
     <p>
         Rinjani
     </p>
</div>

If still doen't work try to remove p tag
http://codepen.io/anon/pen/BLkoNA

Comments