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
Related
If I would need to add a tooltip to a disabled button, I would just wrap the button and place the tooltip on the wrapper.
But how can I add a tooltip to a disabled button if the button is part of a button group? I of course could again use a wrapper, but the button group wouldn't look correct anymore. I would like to not add any extra css for this.
<div class="btn-group btn-group-sm">
<button class="btn btn-success" type="submit" (click)="...">
...
</button>
<button class="btn btn-secondary" type="button" (click)="...">
...
</button>
// this is bad as it breaks the button group style
<div [ngbTooltip]="someConditionThatCanBeTrue ? 'tooltipMessage' : ''">
<button class="btn btn-sm btn-danger" type="button"
[disabled]="someConditionThatCanBeTrue" (click)="...">
...
</button>
</div>
</div>
You can do it by simply adding btn-group btn-group-sm class to the:
<div **class="btn-group btn-group-sm"** [ngbTooltip]="someConditionThatCanBeTrue ? 'tooltipMessage' : ''">
.....
</div>
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 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 am using code from bootstraps main site to create a button banner. I would like to know how to add more buttons to this while keeping its width the same. Also other than style="margin-top: 10px;" how can i adjust the banner?
Bootstrap site: http://getbootstrap.com/components/
<div class="btn-group btn-group-justified">
<div class="btn-group">
<button type="button" class="btn btn-default">Left</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">Middle</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">Right</button>
</div>
</div>