I have a boostrap button group toggle. It says male|female. On page load it shows male so I want it to be toggled/selected to male on page load. Does anyone know how to do this simply?!
<div class="btn-group gender-button" role="group" aria-label="...">
<button type="button" class="btn btn-default" data-target="male-socks">Male</button>
<button type="button" class="btn btn-default" data-target="female-socks">Female</button>
</div>
Instead of using buttons use radio buttons (I assume u mean that as ur question is not very clear)
<div class="btn-group gender-button" role="group" aria-label="...">
<input type="radio" class="btn btn-default" data-target="male-socks">Male</input>
<input type="radio" class="btn btn-default" data-target="female-socks">Female</input>
</div>
Looking for something else , please let me know
Related
I would like to set a selected button in Bootstrap's btn-group:
<div class="btn-toolbar">
<div class="btn-group">
<button type="button" class="btn btn-default">5</button>
<button type="button" class="btn btn-default">6</button>
<button type="button" class="btn btn-default">7</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">8</button>
</div>
</div>
How can I pre-select option 5? This answer suggests that I can add active class to the button, which does indeed work initially, but then clicking on the other buttons doesn't deactivate that button, as I would expect.
Here is a fiddle: http://bootply.com/90490
Here is another fiddle with the active class applied, showing why it isn't the correct solution: http://bootply.com/90491 - click on any of the other buttons, and button 5 still remains active.
Assuming that you want there to be a single selection per button group and that you have included the bootstrap JavaScript file, then the following should work.
Markup
<div class="btn-toolbar">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default"><input type="radio" name="options" id="option5">5</label>
<label class="btn btn-default"><input type="radio" name="options" id="option6">6</label>
<label class="btn btn-default"><input type="radio" name="options" id="option7">7</label>
</div>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default"><input type="radio" name="options" id="option8">8</label>
</div>
</div>
JavaScript
$(document).ready(function() {
$(".btn").first().button("toggle");
});
If you want to, for example, pre-toggle the third button, you can use the slice function like so:
$(".btn").slice(2,3).button("toggle");
Alternatively you could assign identifiers to the buttons.
Here's my fiddle: http://bootply.com/90501
I was looking for an answer to the pre-toggle a button and found this SO. They all seemed a bit difficult and I found a link to BootStrap 4 checkbox buttons which gave me some hints on how BootStrap 3 works. My solution is, I think, simpler as it can be pre-written in the html. The solution is below:
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default active">
<input type="radio" checked>5
</label>
<label class="btn btn-default">
<input type="radio">6
</label>
<label class="btn btn-default">
<input type="radio">7
</label>
</div>
As I say, this was prompted by BootStrap 4 docs but works on BootStrap 3. The important parts are:
The data-toggle="buttons" in the btn-group div.
The active class on the label 5.
The checked on the <input type="radio"> for 5.
I hope this helps others.
You can remove checked from input tag of first button,and add active class on condition .
eg:
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary" [ngClass]="{'active': splitOption=='equal'}" >
<input type="radio" name="options" id="option1" autocomplete="off" > =
</label>
</div>
I am trying to get 2 radio button groups with twitter bootstrap. But I am able to select only one value out of the four buttons I have. They act as a single radio button group instead of 2 separate groups. I have added a different name field, still they behave as a single group. What am I missing out?
<label>Question 1?</label>
<div id="build-type" class="btn-group radio-space" data-toggle="buttons-radio">
<button type="button" id="build-maven" name="build-type" class="btn btn-default btn-group-justified">maven</button>
<button type="button" id="build-ant" name="build-type" class="btn btn-default btn-group-justified">ant</button>
</div>
<label>Questions 2?</label>
<div id="test-framework" class="btn-group radio-space" data-toggle="buttons-radio">
<button type="button" id="test-yes" name="test-framework" class="btn btn-default btn-group-justified">Yes</button>
<button type="button" id="test-no" name="test-framework" class="btn btn-default btn-group-justified">No</button>
</div>
Custom CSS
.radio-space{
width: 60%;
}
I'm working with Bootstrap v3 and I'm using the button group feature as a means of choosing between 3 categories. One of these categories should also be pre-selected upon the page loading. However, whenever I click away from the selected button, it is deactivated.
This is normal if I'm clicking another button, but the selected button deactivates if I click anywhere outside of it. Also, the button I preactivate with the "active" class remains active regardless of if I select other buttons.
Is there a way I can get these buttons to behave like a group of radio buttons that will keep their state even when I click away from them and they lose focus?
Here's the code I'm currently working with:
<div class="btn-group btn-group-justified">
<div class="btn-group">
<button type="button" class="btn btn-default active"><span class="goods">Good</span></button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default"><span class="services">Service</span></button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default"><span class="spaces">Space</span></button>
</div>
</div>
Edit: Heres a link to jsfiddle displaying my issue: http://jsfiddle.net/7JT6M/
You need javascript logic to maintain the state.
$(".type").click(function(){
$(".type").removeClass("active");
$(this).addClass("active");
});
<div class="btn-group btn-group-justified">
<div class="btn-group">
<button type="button" class="btn btn-default type active"><span class="goods">Good</span></button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default type"><span class="services">Service</span></button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default type"><span class="spaces">Space</span></button>
</div>
</div>
DEMO
I'm trying to use the checkbox button functionality described on the bootstrap page here under the subsection "checkbox". I copy pasted the html(shown below) from that page into a jsfiddle and checkboxes suddenly appear inside the buttons. How can I get rid of them? I couldn't find any mention of this issue on the Bootstrap site or using Google.
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="checkbox">Option 1</label>
<label class="btn btn-primary">
<input type="checkbox">Option 2</label>
<label class="btn btn-primary">
<input type="checkbox">Option 3</label>
</div>
EDIT: I found that calling .hide() on the input checkbox elements hides the checkbox and the checkboxes then look just like buttons as in Bootstrap 3.
In your JSFIDDLE you're are using Bootstrap v2.0.4 .. that Boostrap doc site uses the newer Bootstrap v3.1.1
Check which version you have loaded in your development environment
For Boostrap 2.x.x you would need to do
<div class="btn-group" data-toggle="buttons-radio">
<button type="button" class="btn btn-primary">Left</button>
<button type="button" class="btn btn-primary">Middle</button>
<button type="button" class="btn btn-primary">Right</button>
</div>
http://getbootstrap.com/2.3.2/javascript.html#buttons
try this code for check boxes:
<div>
<label class="col-md-4">
<input type="checkbox"> Option 1
</label>
<label class="col-md-4">
<input type="checkbox"> Option 2
</label>
<label class="col-md-4">
<input type="checkbox"> Option 3
</label>
</div>
It is done in http://jsfiddle.net/g3mu8/307/.
and and button here:
<div class="btn-group">
<button type="button" class="btn btn-primary" data-toggle="button">option1</button>
<button type="button" class="btn btn-primary" data-toggle="button">option2</button>
<button type="button" class="btn btn-primary" data-toggle="button">option3</button>
</div>
done here http://jsfiddle.net/g3mu8/308/
**Bootstrap 3
I'm trying to make each set of button group unique but the different groups are interfering with each other
<label>Payment Mode</label>
<div class="btn-group">
<button type="button" class="btn btn-default">Cash / Cheque / Bank Transfer </button>
<button type="button" class="btn btn-default">JobsBuddy Disbursement</button>
</div>
<label>Payment Period</label>
<div class="btn-group">
<button type="button" class="btn btn-default">Immediate</button>
<button type="button" class="btn btn-default"> More Than 1 day</button>
</div>
How do i keep it unique in it's own group
You may want to use the Bootstrap provided radio button groups (http://getbootstrap.com/javascript/#buttons), and then use the reset method to clear the other group..
HTML:
<label>Payment Mode</label>
<div id="mode-group" class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="radio" name="mode" id="option1"> Cash / Cheque / Bank Transfer
</label>
<label class="btn btn-primary">
<input type="radio" name="mode" id="option2"> JobsBuddy Disbursement
</label>
</div>
<label>Payment Period</label>
<div id="period-group" class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="radio" name="period" id="period1"> Immediate
</label>
<label class="btn btn-primary">
<input type="radio" name="period" id="period2"> More Than 1 day
</label>
</div>
jQuery:
// unselect period when mode is selected
$("#mode-group .btn").on('click',function(){
$("#period-group").button('reset');
});
Demo: http://bootply.com/86422
Click the button in the btn-group doesn't set a (active) class. The button gets a different background-color cause it is focussed (:focus). Clicking a button in a different btn-group sets the focus to this button.
Use something like this to set an active class per btn-group:
$('.btn-group button').click(function()
{
$(this).parent().children().removeClass('active');
$(this).addClass('active');
});
If you are using AngularJS the Angular UI bootstrap has a great solution.
Basically do the following using the btnRadio directive.
<div class="btn-group">
<label class="btn btn-primary" ng-model="radioModel" btn-radio="'Left'">Left</label>
<label class="btn btn-primary" ng-model="radioModel" btn-radio="'Middle'">Middle</label>
<label class="btn btn-primary" ng-model="radioModel" btn-radio="'Right'">Right</label>
</div>
To keep unique button just don't use class="btn-group":
<label>Payment Mode</label>
<div>
<button type="button" class="btn btn-default">Cash / Cheque / Bank Transfer </button>
<button type="button" class="btn btn-default">JobsBuddy Disbursement</button>
</div>
<label>Payment Period</label>
<div>
<button type="button" class="btn btn-default">Immediate</button>
<button type="button" class="btn btn-default"> More Than 1 day</button>
</div>
This class is used for series of buttons. Check documentation of Buttons Group
Just to simplify it for the next person to come looking, here's the solution code from the Bootstrap website:
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected)
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
</label>
</div>
Basically, you style the labels as buttons and code the options as regular radio buttons to separate one set of options from the other.