title: Bootstrap 4 center-block unable to center
body: <p>I have the following bootstrap html code (its JSX hence the <code>className</code> but the idea is the same):</p>
  
  <pre><code>&lt;div className="toggleView btn-group center-block" role="group" aria-label="Basic example"&gt;
          &lt;button onClick={this.handleTimelineClick} type="button" className={this.state.toggleCalendar == false ? "btn btn-secondary active" : "btn btn-secondary"}&gt;Timeline&lt;/button&gt;
          &lt;button onClick={this.handleCalendarClick} type="button" className={this.state.toggleCalendar == true ? "btn btn-secondary active " :"btn btn-secondary"}&gt;Calendar&lt;/button&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>I am trying to center this code with either bootstrap center-block or with CSS but cannot seem to get it to work:</p>
  
  <p><a href="https://i.stack.imgur.com/jzVbB.png" rel="noreferrer"><img src="https://i.stack.imgur.com/jzVbB.png" alt="enter image description here"></a></p>
  
  <p>The green bar highlights the div <code>toggleView</code>.</p>
  
  <p>The only css I am using is the following:</p>
  
  <pre><code>.toggleView {
      padding: 20px;
  }
  </code></pre>
  
  <p>Why can I not center this button group?</p>