Bootstrap 4 центральный блок не может центрировать

У меня есть следующий код html bootstrap (его JSX, следовательно, className, но идея такая же):

<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>

Я пытаюсь центрировать этот код как с центральным блоком начальной загрузки, так и с CSS, но, похоже, не может заставить его работать:

Зеленая полоска выделяет div toggleView.

Единственный css, который я использую, следующий:

.toggleView {
    padding: 20px;
}

Почему я не могу центрировать эту группу кнопок?