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>
Related
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>
Buttons
Here is my code, and i dont know how to place the buttons side to side. (btw I'm new at coding)
<div class="second">
<div class="col-md-12 text-center">
<form>
<button class="btn btn-primary btn-lg" type="submit" formaction="1klasse.html">1.klasse </button>
</form>
</div>
<div class="col-md-8 text-center">
<form>
<button class="btn btn-primary btn-lg" type="submit" formaction="1klasse.html">2.klasse </button>
</form>
</div>
</div>
Just put the buttons inside the same form and div
<div class="second">
<div class="col-md-12 text-center">
<form>
<button class="btn btn-primary btn-lg" type="submit" formaction="1klasse.html">1.klasse </button>
<button class="btn btn-primary btn-lg" type="submit" formaction="1klasse.html">2.klasse </button>
</form>
</div>
</div>
Since you are using bootstrap, there are a few things you need to know:
.col class will not work without putting the class within .container and .row classes. The other important thing is that the column numeric sizes add up to 12; right now yours add to 20. So your code should look more like this:
<div class="container">
<div class="row">
<div class="col-12 col-md-6">
<form>
<button class="btn btn-primary btn-lg" type="submit" formaction="1klasse.html">1.klasse </button>
</form>
</div>
<div class="col-12 col-md-6">
<form>
<button class="btn btn-primary btn-lg" type="submit" formaction="1klasse.html">1.klasse </button>
</form>
</div>
</div>
</div>
Here is a codepen to show it working
Refer to Bootstrap documentation on grids as well
<div class="row second">
<div class="col-md-4 text-center">
<form>
<button class="btn btn-primary btn-lg" type="submit" formaction="1klasse.html">1.klasse </button>
</form>
</div>
<div class="col-md-8 text-center">
<form>
<button class="btn btn-primary btn-lg" type="submit" formaction="1klasse.html">2.klasse </button>
</form>
</div>
</div>
<div class="second">
<div class="col-md-12 text-center">
<form>
<button class="btn btn-primary btn-lg" type="submit" formaction="1klasse.html">1.klasse </button>
<button class="btn btn-primary btn-lg" type="submit" formaction="1klasse.html">2.klasse </button>
</form>
</div>
</div>
The buttons were in different columns, so it went one line down.
Read more about Bootstrap grid system
Before looking into the answer below, I suggest that you read about boostrap grid system. Each row has 12 columns.
Your first <div> used up 12 columns, and that's why the second button of the second <div> is on the new row/line.
More details can be found here:
Bootstrap: Aligning two buttons on the same row
In Bootstrap, how can I get a button group like the following that span the full width of a parent element? (like with the ".btn-block" class, but applied to a group http://getbootstrap.com/css/#buttons-sizes )
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
Correct solution for Bootstrap 4 and Bootstrap 5 (from Bootstrap 4 migration documentation):
Removed .btn-group-justified. As a replacement you can use <div class="btn-group d-flex" role="group"></div> as a wrapper around elements with .w-100.
Example:
<div class="btn-group d-flex" role="group" aria-label="...">
<button type="button" class="btn btn-default w-100">Left</button>
<button type="button" class="btn btn-default w-100">Middle</button>
<button type="button" class="btn btn-default w-100">Right</button>
</div>
Source: https://getbootstrap.com/docs/4.0/migration/#button-group
Edit: verified solution with Bootstrap 5
Flexbox can do that.
.btn-group.special {
display: flex;
}
.special .btn {
flex: 1
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="btn-group special" role="group" aria-label="...">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
You can also use bootstraps btn-block will span across parent.
Create block level buttons—those that span the full width of a parent—by adding .btn-block.
<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-secondary btn-lg btn-block">Block level button</button>
https://getbootstrap.com/docs/4.0/components/buttons/
In Bootstrap 4, make use of .d-flex on your .btn-group and .w-100 on individual buttons:
.btn-group.d-flex(role='group')
button.w-100.btn.btn-lg.btn-success(type='button') 👍
button.w-100.btn.btn-lg.btn-danger(type='button') 👎
.btn-group(role='group')
button#btnGroupDrop1.btn.btn-lg.btn-light.dropdown-toggle(type='button', data-toggle='dropdown')
| •••
.dropdown-menu
a.dropdown-item(href='#') An option
a.dropdown-item(href='#') Another option
You can also use .btn-group-justified.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="btn-group btn-group-justified">
Left
Middle
Right
</div>
</div>
<div class="col-sm-12">
<div class="btn-group btn-block" role="group">
<button class="btn btn-success col-sm-10" type="submit">Button 1</button>
<button class="btn btn-danger col-sm-2" type="submit">Button 2</button>
</div>
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