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?
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>
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>
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments