Bootstrap 4 center-bloc incapable de centre

J'ai le texte suivant bootstrap code html (son JSX d'où le className mais l'idée est la même):

<div className="toggleView btn-group center-block" role="group" aria-label="Basic example">
        <button onClick={this.handleTimelineClick} type="button" className={this.state.toggleCalendar == false ? "btn btn-secondary active" : "btn btn-secondary"}>Timeline</button>
        <button onClick={this.handleCalendarClick} type="button" className={this.state.toggleCalendar == true ? "btn btn-secondary active " :"btn btn-secondary"}>Calendar</button>
 </div>

Je suis en train de centre de ce code, soit avec bootstrap center-block ou CSS mais ne semble pas à le faire fonctionner:

La barre verte met en évidence la div toggleView.

Le seul css que j'utilise est la suivante:

.toggleView {
    padding: 20px;
}

Pourquoi je ne peux pas le centre de ce groupe de boutons?

OriginalL'auteur ApathyBear | 2016-07-07