Центрирование кнопок в бутстрапе 4 строки

Question

Я пытаюсь установить флажки в качестве кнопок в Bootstrap. Я попытался использовать «text-center» и «center-block» внутри окружающего div и ввода, но без эффекта. (Вы можете увидеть в примере, каждый из «текста-центра» и «центр-блок», используемый во многих местах.)

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> 

Я создал скрипку и выделены на фоне другого цвета для одного из разделов, чтобы вы могли видеть отсутствие центрирования: https://jsfiddle.net/rovh1fcw/3/

Спасибо за помощь! Я уверен, что это что-то простое, что я пропускаю.

Answer 1

text-center класс теперь text-xs-center в Bootstrap 4 альфа. Также удалите btn-group из ваших колонок, так как это вызывает кнопка для отображения рядный ..

<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

Answer 2

div[data-toggle]{ 
    display: flex; 
    flex-direction: row; 
    flex-wrap: wrap; 
    justify-content: center; 
    align-items: center; 
} 

https://jsfiddle.net/rovh1fcw/18/