Bloque central Bootstrap 4 incapaz de centrarse Desarrollo HTML

Tengo el siguiente código html bootstrap (su JSX, por lo tanto, el className pero la idea es la misma):

Estoy intentando centrar este código con bootstrap center-block o con CSS, pero parece que no funciona:

enter image description here

La barra verde resalta el div toggleView .

La única CSS que estoy usando es la siguiente:

 .toggleView { padding: 20px; }

¿Por qué no puedo centrar este grupo de botones?

btn-group tiene display:inline-block para que use text-center en el contenedor padre.

http://codeply.com/go/hyUYkUrtRN

NOTA: En Bootstrap 4, center-block ahora es mx-auto , representando margin: 0 auto; para centrar la display:block elementos de display:block . Bootstrap 4 ahora también tiene una clase d-block para que se pueda mostrar un elemento en línea: bloque como este https://stackoverflow.com/questions/38251191/bootstrap-4-center-block-unable-to-center/…

También vea: Centre el contenido dentro de una columna en Bootstrap 4

Bootstrap 4 (a partir de 2017-08-16) usará d-block y para centrarlo usará mx-auto .

Bootstrap 4 no tiene center-block En su lugar, utilizo d-block mx-auto que establece que la pantalla se bloquee, y los márgenes izquierdo y derecho en automático.