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

У меня есть следующий загрузочный HTML-код (его 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;
}

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