CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Rik
Rik

Reputation: 93

Bootstrap columns 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 bootstrap.

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;
}

Upvotes: 1

Views: 1056

Answers (1)

Hardik Gondalia
Hardik Gondalia

Reputation: 3717

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

Upvotes: 1

Related Questions