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%;
}
Related
I want to create a clickable button which send me the user at the form section(at same page).
<button type="button" class="btn btn-primary btn-sm">
send me to the form
</button>
...
<form id="form1">
<div class="form-group">
...
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
But I didn't find any solution.
Is there any why to do it without rely on jquery/JS? If not then how to target the form? Here is my codepen in case you need it.
nest your button in the link tag this way:
<a href="#form-1">
<button type="button" class="btn btn-primary btn-sm">
send me to the form
</button>
this is how i am trying to insert a button in my div using bootstrap btn-block
<div class="row">
<div class="col-sm-4 w-50">
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-secondary" (click)="decreaseTheQuantity()"><span class="glyphicon glyphicon-chevron-left"></span></button>
<button type="button" class="btn btn-light">{{quantity}}</button>
<button type="button" class="btn btn-secondary" (click)="increaseTheQuantity()"><span class="glyphicon glyphicon-chevron-right"></span></button>
</div>
</div>
<div class="col-sm-8 w-50">
<button class="btn btn-success btn-block" (click)="submitProductToACart()">Hinzufügen</button>
</div>
</div>
In Chrome dev tool it will be shown like this.
On phone (Safari and chrome) it is like this
Apart from Bootstraps classes i am not using any css classes.
I want to align it to right as shown in the first picture.
I am not sure how can i fix this or recreate this locally.
Any pointers would be highly appreciated. Thanks
**** Update *****
In DEV Tools i have tried different resolutions there i can see that it is properly aligned.
Good day,
I have a little issue with bootstrap button groups. Probably I am doing something wrong or I am overlooking something. But I am running a bit at a dead end here. So I hope that someone could shed a bit of light on this topic.
I have a couple of buttons set inside of a bootstrap group.
The buttons are nicely aligned and appear as they should.
Except for mobile.
When I resize the window however I notice that the buttons stay horizontally aligned. They do not automatically form a row such as bootstrap columns.
Now this is exactly what I would like. Since I want those buttons to form a toolbar that is usable on a mobile phone as well.
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="btn-group mr-2" role="group" aria-label="button group">
<button type="button" class="btn btn-default">button one</button>
<button type="button" class="btn btn-default">button two</button>
<button type="button" class="btn btn-default">button three</button>
<button type="button" class="btn btn-default">button four</button>
<button type="button" class="btn btn-default">button five</button>
<button type="button" class="btn btn-default">button six</button>
</div>
</div>
</div>
</div>
Take the code above.
That generates the following :
But when resizing the thing I get :
Whilst I would like the buttons to resize or order in a way they are suitable as a toolbar functioning for mobile phones.
You need to actually size the buttons inside your container grid.
https://getbootstrap.com/docs/4.3/layout/grid/
<div class="container">
<div class="col-md-12">
<div class="btn-group row" role="group" aria-label="button group">
<button type="button" class="btn btn-default col-md-2">button one</button>
<button type="button" class="btn btn-default col-md-2">button two</button>
<button type="button" class="btn btn-default col-md-2">button three</button>
<button type="button" class="btn btn-default col-md-2">button four</button>
<button type="button" class="btn btn-default col-md-2">button five</button>
<button type="button" class="btn btn-default col-md-2">button six</button>
</div>
</div>
</div>
What you see is the default behavior of the button-group class... so we can define our own rule for the width breakpoint where the scroll starts to emerge by adding the following CSS:
#media screen and (max-width:576px){
.btn-group{display:flex; flex-direction: column;}
}
Complete snippet below:
#media screen and (max-width:576px) {
.btn-group {
display: flex;
flex-direction: column;
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="btn-group mr-2 " role="group" aria-label="button group">
<button type="button" class="btn btn-default">button one</button>
<button type="button" class="btn btn-default">button two</button>
<button type="button" class="btn btn-default">button three</button>
<button type="button" class="btn btn-default">button four</button>
<button type="button" class="btn btn-default">button five</button>
<button type="button" class="btn btn-default">button six</button>
</div>
</div>
</div>
</div>
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
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