BootStrap CSS margin 0 auto not center

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


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


EDIT: Guillemo Mansilla's answer is better. Same technique but better use of existing Bootstrap classes.

You can set text-align: center on the .container. No need for the margin: 0 auto.

.container {
  text-align: center;
  margin-top: 100px;
}

http://jsbin.com/oyaDokOw/2/edit