Bootstrap buttons not centering as expected

Asked Feb 13 '18 at 16:15

Active Feb 13 '18 at 16:21

Viewed 56 times

I have this column in my Bootstrap grid:

<div class=col-sm-2>
    <div class="w-75 mx-auto">
        <br><a class='button btn btn-outline-dark' href='{% url "elections:new_post" %}'>New Post</a><br><br>
        <a class='button btn btn-outline-dark' href='{% url "elections:new_image" %}'>New Image</a><br><br>
        <div class='card'>
            <div class='card-body'>
                <p>Test</p>
            </div>
        </div>
    </div>
</div>

Because of the mx-auto, I would expect everything within those div tags to be centered, but the buttons are anchored to the left margin, as is the card and the text within the card.

How do I center the buttons and the card?

asked Feb 13 '18 at 16:15

cbuch1800

do you have `
`, `
` or `
` around your other divs? – mast3rd3mon Feb 13 '18 at 16:20
2

It's just `text-center` – Carol Skelly Feb 13 '18 at 16:20
@mast3rd3mon I have none of those. Should I? – cbuch1800 Feb 13 '18 at 16:20
@ZimSystem That works, thank you :) – cbuch1800 Feb 13 '18 at 16:21
yes, you should, that way all the styling should behave, i recommend using `
` – mast3rd3mon Feb 13 '18 at 16:21
FYI: `mx-auto` sets the margin of the `div` to auto. Not the margins of its child elements. – mbrandau Feb 13 '18 at 16:55

Bootstrap buttons not centering as expected

0 Answers0