bootstrap 4 Centro-block in grado di centrare

Question

Ho il seguente codice html di bootstrap (sua JSX quindi il className ma l'idea è la stessa):

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

sto cercando di centrare questo codice sia con centro bootstrap -BLOCCO o con i CSS, ma non riesco a farlo funzionare:

la barra verde evidenzia la div toggleView.

L'unica css sto utilizzando è il seguente:

.toggleView { 
    padding: 20px; 
} 

Perchè non posso centrare questo gruppo di pulsanti?

Answer 1

btn-group ha display:inline-block in modo che avrebbe utilizzare text-center nel contenitore padre ..

http://codeply.com/go/hyUYkUrtRN

NOTA: In Bootstrap 4, center-block è ora mx-auto, che rappresenta margin: 0 auto; per centrare display:block elementi. Bootstrap 4 ora ha una classe d-block troppo così un elemento inline può essere fatta display: block come questo ..

<img src=".." class="d-block mx-auto" >

vedi anche: Center the content inside a column in Bootstrap 4

Answer 2

Bootstrap 4 non ha center-block Invece, io uso d-block m-x-auto che imposta display per bloccare, e margini sinistro e destro per auto.

Answer 3

Bootstrap 4 (a partire dal 2017-08-16) utilizzerà d-block e al centro si utilizza mx-auto.