CODEWITHSUNDEEP
jquerytwitter-bootstrap
bretterer
bretterer

Reputation: 5781

Creating a twitter bootstrap split button radio group

Given the code below. How can I create each options button as part of the same button radio group?

<div class="row">

    <div class="plan-option span3 well">
        <h3 class="plan-option-title">Product Name</h3>
        <div class="plan-pricing">
            <p class="plan-price">$x<span class="small"> one-time</span></p>
            <div class="signup-btn">
                <button type="button" class="btn-large btn-block btn" >select</button>
            </div>
        </div>
    </div>

    <div class="plan-option span3 well">
        <h3 class="plan-option-title">Product Name</h3>
        <div class="plan-pricing">
            <p class="plan-price">$x<span class="small"> one-time</span></p>
            <div class="signup-btn">
                <button type="button" class="btn-large btn-block btn" >select</button>
            </div>
        </div>
    </div>

    <div class="plan-option span3 well">
        <h3 class="plan-option-title">Product Name</h3>
        <div class="plan-pricing">
            <p class="plan-price">$x<span class="small"> one-time</span></p>
            <div class="signup-btn">
                <button type="button" class="btn-large btn-block btn" >select</button>
            </div>
        </div>
    </div>

    <div class="plan-option span3 well">
        <h3 class="plan-option-title">Product Name</h3>
        <div class="plan-pricing">
            <p class="plan-price">$x<span class="small"> one-time</span></p>
            <div class="signup-btn">
                <button type="button" class="btn-large btn-block btn" >select</button>
            </div>
        </div>
    </div>

</div>

I have tried wrapping everything in a btn-group div but that does not work. I have also tried adding data-toggle="buttons-radio" to each button but that does not work.

The goal is to have a selector button for the plans where only one of the buttons is active. Does this have to be done with custom jquery or can this be done via the button groups and buttons-radio from twitter bootstrap?

Upvotes: 0

Views: 2727

Answers (2)

Dhiraj
Dhiraj

Reputation: 33628

All you need to do is include bootstrap-button.js from here and it should take care of the rest.

Please find the demo here

EDIT : For this particular case, the text near the btn-group disappears as bootstrap sets font-size to 0px inside a btn group. If text is required to be placed inside a btn-group, a label can be used instead.

DEMO updated

I hope this helps

Upvotes: 1

16dots
16dots

Reputation: 3080

What you want to do is just use JQuery and add class ".active" to the button that you clicked, then check which one of those has ".active" class onSubmit.

see jsfiddle

Upvotes: 1

Related Questions