ApathyBear ApathyBear - 4 months ago 28
CSS Question

bootstrap 4 center-block unable to center

I have the following bootstrap html code (its JSX hence the

className
but the idea is the same):

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


I am trying to center this code with either bootstrap center-block or with CSS but cannot seem to get it to work:

enter image description here

The green bar highlights the div
toggleView
.

The only css I am using is the following:

.toggleView {
padding: 20px;
}


Why can I not center this button group?

Answer

btn-group has display:inline-block so you would use text-center in the parent container..

http://codeply.com/go/hyUYkUrtRN

Comments