How to center content within columns on Bootstrap 3

Question

I have this code:

<div class="article-quiz-content.container">
    <div class="row">
        <div class="col-xs-6.quiz-cols">
            <div class="true-placeholder">
                <a class=icon-true-shape amenitie_icon" href="#" data-answer="true">
            </div>
        </div>
        <div class=col-xs-6.quiz-cols">
            <div class="false-placeholder">
                <a class="icon-false-shape amenitie_icon" href="#" data-answer="false">
            </div>
        </div>
    </div>
</div>

Which leads to this:

I need those icons to be in the center of the columns.

Suggestions?

Still not proper HTML. Also, it looks like you have custom CSS, so please include that as well. You need to include everything relevant to the piece you're asking about. — MattD, Dec 09 '16 at 20:52
Which is all fine and well, but you need to provide the full and proper HTML output from the engine, especially since you didn't tag the post with JADE. — MattD, Dec 09 '16 at 20:55
Another dup: http://stackoverflow.com/questions/9184141/how-do-you-get-centered-content-using-twitter-bootstrap — Carol Skelly, Dec 09 '16 at 20:57

score 2 · Answer 1 · answered Dec 09 '16 at 20:53

2

Just add class text-center to your columns (.col-xs-6)

Reference: https://getbootstrap.com/css/#type-alignment

EDIT: after you changed markup you need to add it to placeholder divs

answered Dec 09 '16 at 20:53

Tomas

106
4

score 1 · Accepted Answer · answered Dec 09 '16 at 20:52

1

You can do something like this in your css:

.quiz-cols{
   text-align: center;
}

.amenitie_icon{
  display: inline-block;

}

Inline-block element float to center if container has text-align: center

answered Dec 09 '16 at 20:52

cesare

2,098
19
29

There are Bootstrap styling classes that can likely be used. No additional, custom CSS should be required. – MattD Dec 09 '16 at 20:56
text-center to the container, or center-block to the content (if is a block element) – cesare Dec 09 '16 at 20:56

How to center content within columns on Bootstrap 3

2 Answers2