Bootstrap 4 blocco centrale non centrato

Ho il seguente codice html bootstrap (il suo JSX quindi il nome class, ma l’idea è la stessa):

 

Sto cercando di centrare questo codice con il blocco di avvio di bootstrap o con CSS ma non riesco a farlo funzionare:

inserisci la descrizione dell'immagine qui

La barra verde evidenzia il div toggleView .

L’unico css che sto usando è il seguente:

 .toggleView { padding: 20px; } 

Perché non posso centrare questo gruppo di pulsanti?

btn-group ha display:inline-block modo da utilizzare il text-center nel contenitore padre.

http://codeply.com/go/hyUYkUrtRN

NOTA: In Bootstrap 4, il center-block è ora mx-auto , che rappresenta il margin: 0 auto; per il centraggio del display:block elementi di display:block . Bootstrap 4 ora ha anche una class d-block modo che possa essere mostrato un elemento inline: block like this https://stackoverflow.com/questions/38251191/bootstrap-4-center-block-unable-to-center/..

Vedi anche: Centra il contenuto all’interno di una colonna in Bootstrap 4

Bootstrap 4 (a partire dal 2017-08-16) utilizzerà il d-block e per centrare l’uso di mx-auto .

Bootstrap 4 non ha un center-block Invece, utilizzo il d-block mx-auto dx d-block mx-auto che imposta la visualizzazione da bloccare e i margini sinistro e destro su automatico.