BootStrap CSS margin 0 auto not center

Question

I'm currently using BootStrap 3. Well I can't make the button group center.

HTML

<div class="container" style="margin-top:100px;">             
 <div class="btn-group" style="margin:0 auto">
     <button type="button" class="btn btn-default" >Left</button>
     <button type="button" class="btn btn-default" >Middle</button>
     <button type="button" class="btn btn-default" >Right</button>
 </div>
</div>

How can I fixed that ?

Answer 1

You don't need to use inline styles, just apply the class "text-center" which is already included in bootstrap

Answer 2

Bootstrap 4 use

Use text-center or mx-auto or container-fluid

1. You could use this hack text-center (this does not only apply for text)

2. Or use the exact boostrap4 class mx-auto

example class="text-center" or class="mx-auto"

in context

<div class="btn-group text-center"> or <div class="btn-group mx-auto">

TRY NOT TO USE inline styles (bad practice)

<div class="btn-group" style="margin:0 auto">

---

References here:

text-center => https://getbootstrap.com/docs/4.0/utilities/text/

mx-auto => https://getbootstrap.com/docs/4.0/utilities/spacing/#horizontal-centering