Centering checkbox buttons in Bootstrap 4 row

Question

I am trying to center checkboxes as buttons in Bootstrap. I've tried using "text-center" and "center-block" within the surrounding div and the input but with no effect. (You can see in the example each of "text-center" and "center-block" used in numerous places.)

HTML:

    <div class="row grade-selection">
      <div class="col-xs-1"></div>
      <div class="col-xs-2 btn-group text-center" data-toggle="buttons">
        <label class="btn btn-primary">
          <input type="checkbox" autocomplete="off">K</label>
      </div>
      <div class="col-xs-2 btn-group" data-toggle="buttons">
        <label class="btn btn-primary text-center">
          <input type="checkbox" autocomplete="off">1</label>
      </div>
      <div class="col-xs-2 btn-group" data-toggle="buttons">
        <label class="btn btn-primary">
          <input class="text-center" type="checkbox" autocomplete="off">2</label>
      </div>
      <div class="col-xs-2 btn-group center-block" data-toggle="buttons">
        <label class="btn btn-primary">
          <input type="checkbox" autocomplete="off">3</label>
      </div>
      <div class="col-xs-2 btn-group" data-toggle="buttons">
        <label class="btn btn-primary center-block">
          <input type="checkbox" autocomplete="off">4</label>
      </div>
      <div class="col-xs-1"></div>
    </div>
    <div class="row grade-selection">
      <div class="col-xs-1"></div>
      <div class="col-xs-2 btn-group" data-toggle="buttons">
        <label class="btn btn-primary">
          <input class="center-block" type="checkbox" autocomplete="off">5</label>
      </div>
      <div class="col-xs-2 btn-group" data-toggle="buttons">
        <label class="btn btn-primary active">
          <input type="checkbox" checked autocomplete="off">6</label>
      </div>
      <div class="col-xs-2 btn-group" data-toggle="buttons">
        <label class="btn btn-primary active">
          <input type="checkbox" checked autocomplete="off">7</label>
      </div>
      <div class="col-xs-2 btn-group" data-toggle="buttons">
        <label class="btn btn-primary">
          <input type="checkbox" autocomplete="off">8</label>
      </div>
      <div class="col-xs-2 btn-group" data-toggle="buttons">
        <label class="btn btn-primary">
          <input type="checkbox" autocomplete="off">9</label>
      </div>
      <div class="col-xs-1"></div>
    </div>
    <div class="row grade-selection">
      <div class="col-xs-3"></div>
      <div class="col-xs-2 btn-group" data-toggle="buttons">
        <label class="btn btn-primary">
          <input type="checkbox" autocomplete="off">10</label>
      </div>
      <div class="col-xs-2 btn-group" data-toggle="buttons">
        <label class="btn btn-primary">
          <input type="checkbox" autocomplete="off">11</label>
      </div>
      <div class="col-xs-2 btn-group" data-toggle="buttons">
        <label class="btn btn-primary">
          <input type="checkbox" autocomplete="off">12</label>
      </div>
      <div class="col-xs-3"></div>
    </div>

  </div>
</div>

I have created a Fiddle and highlighted the background a different colour for one of the divs so that you can see the lack of centering: https://jsfiddle.net/rovh1fcw/3/

Thanks for your help! I'm sure it's something simple I am overlooking.

Answer 1

The text-center class is now text-xs-center in Bootstrap 4 alpha. Also remove the btn-group from your columns as this is causing the button to display inline..

<div class="col-xs-2 text-xs-center" data-toggle="buttons">
  <label class="btn btn-primary text-xs-center">
  <input type="checkbox" autocomplete="off">1</label>
</div>

DEMO: http://www.codeply.com/go/ZjGIIW1qeQ

More on upgrading to Bootstrap 4