bootstrap 4 align buttons in center

Question

im a little stuck as to how to center align a button group i have:

<section>
  <div class="d-inline mx-auto">
    <a class="btn btn-outline-primary" href="#">Home</a>
    <a class="btn btn-outline-primary" href="#">Traffic</a>
    <a class="btn btn-outline-primary" href="#">MAC Monitoring</a>
    <a class="btn btn-outline-primary" href="#">Alert Logging</a>
    <a class="btn btn-outline-primary" href="#">Diameter Server</a>
    <a class="btn btn-outline-primary" href="#">Maintenance Mode</a>
  </div>
</section>

I've tried to add d-inline and mx-auto to it but it doesnt work. Im not that familiar with the library so could someone please point me in the right direction?

Answer 1

Just use margin:auto its working with bootstrap 4

.center{margin:auto;}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<section class="row">
  <div class="center">
    <a class="btn btn-outline-primary" href="#">Home</a>
    <a class="btn btn-outline-primary" href="#">Traffic</a>
    <a class="btn btn-outline-primary" href="#">MAC Monitoring</a>
    <a class="btn btn-outline-primary" href="#">Alert Logging</a>
    <a class="btn btn-outline-primary" href="#">Diameter Server</a>
    <a class="btn btn-outline-primary" href="#">Maintenance Mode</a>
  </div>
</section>

or you can use mx-auto in this way..

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<section class="row">
  <div class="mx-auto">
    <a class="btn btn-outline-primary" href="#">Home</a>
    <a class="btn btn-outline-primary" href="#">Traffic</a>
    <a class="btn btn-outline-primary" href="#">MAC Monitoring</a>
    <a class="btn btn-outline-primary" href="#">Alert Logging</a>
    <a class="btn btn-outline-primary" href="#">Diameter Server</a>
    <a class="btn btn-outline-primary" href="#">Maintenance Mode</a>
  </div>
</section>

Answer 2

add the 2 classes mx-auto d-block to the button

<button class="btn btn-primary mx-auto d-block">My Button</button>

this worked for me when the button was in a card-body div.