CODEWITHSUNDEEP
twitter-bootstrapcss
user411103
user411103

Reputation:

Set default option on bootstrap's btn-group

I am using Bootstrap's btn-group in a form and I want to mark an option as default. I am adding the "active" class. However, when I click on a different one, this one becomes active too (so I have two active buttons).

Is there an easy way to set an option as default without this issue?

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

Additional question: what can you do in order to center this btn-group when you have only one column (on smartphones)? I tried adding "text-center" as a class, but it keeps on the left.

Upvotes: 0

Views: 1397

Answers (1)

isherwood
isherwood

Reputation: 61092

Bootstrap doesn't do button group toggling. You'll need to write a bit of jQuery.

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

As to your bonus question--.text-center seems to work fine.

Demo

Upvotes: 1

Related Questions