Bootstrap 3 text-align: center not working

Question

I have read through multiple questions and I know it's as simple as adding text-align: center , however that's not working for me.

I have also tried to add text-center to my wrapper <div> but that did not work either.

Current result: (Hard to see but it's all white-space to the right. I tried to add a black border with style="border: 1px black;" but nothing showed up...)

HTML

<div class="row">
    <div class="btn-group btn-group-justified" id="dataTableSegmentedControl" role="group" aria-label="...">
        <div class="btn-group" role="group">
            <button type="button" class="btn btn-default active">Dashboard</button>
            <button type="button" class="btn btn-default">Events</button>
        </div>
    </div>
</div>

CSS

#dataTableSegmentedControl button {
    width: 25%;
    border-radius: 0;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom-width: 3px;
    display: inline-block;
    margin: auto;
    margin-bottom: 8px;
    margin-top: 8px;
}

Answer 1

My agenda before running into this issue was to use the Bootstrap 3 way of making buttons equal in width by using btn-group-justified , however as my question above states it did not work for me when trying to get these buttons centered.

My end result is reverting back to using CSS to format it correctly in the center.

HTML

<div class="row" style="text-align: center;">
    <div class="btn-group" id="dataTableSegmentedControl" role="group" aria-label="...">
        <button type="button" class="btn btn-default">Dashboard</button>
        <button type="button" class="btn btn-default">Events</button>
    </div>
</div>

CSS

#dataTableSegmentedControl button {
    width: 400px;
    border-radius: 0;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom-width: 3px;
    margin: auto;
    margin-bottom: 8px;
    margin-top: 8px;
    background-color: #f7f7f7;
}

Result

It's not my desired result because the width of the buttons is a static 400px . I tried 50% but that was a lot smaller.