Установить опцию по умолчанию в btn-группе bootstrap

Question

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

Есть ли простой способ установить параметр по умолчанию без этой проблемы?

 <div id="summarySize" class="btn-group col-md-4 col-md-offset-4 text-center" role="group" aria-label="Summary Size""> 
      <button type="button" class="btn btn-default" name="inlineRadioOptions" id="inlineRadio1">Short</button> 
      <button type="button" class="btn active btn-default" name="inlineRadioOptions" id="inlineRadio2">Medium</button> 
      <button type="button" class="btn btn-default" name="inlineRadioOptions" id="inlineRadio3">Large</button> 
     </div> 

Дополнительный вопрос: что вы можете сделать для того, чтобы центрировать этот БТН-группу, когда у вас есть только один столбец (на смартфонах)? Я попробовал добавить «текстовый центр» как класс, но он держится слева.

Answer 1

Bootstrap не делает кнопка группа переключение. Вам нужно написать немного jQuery.

$('#summarySize .btn').click(function() { 
    $(this).addClass('active').siblings().removeClass('active'); 
}); 

Как бонуса question-- .text-center, кажется, работает хорошо.

Demo