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
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>
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
What is the best way to horizontally space Bootstrap buttons?
At the moment the buttons are touching:
<div class="btn-group">
<button class="btn btn-inverse dropdown-toggle" data-toggle="dropdown">
<i class="icon-in-button"></i>
Add to list
<span class="caret"/>
</button>
<ul class="dropdown-menu">
<li>
here
</li>
<li>
new
</li>
</ul>
<button class="btn btn-info">
<i class="icon-in-button"></i>
more
</button>
</div>
jsfiddle showing the problem: http://jsfiddle.net/hhimanshu/sYLRq/4/
Put them inside btn-toolbar or some other container, not btn-group. btn-group joins them together. More info on Bootstrap documentation.
Edit: The original question was for Bootstrap 2.x, but the same is still valid for Bootstrap 3 and Bootstrap 4.
In Bootstrap 4 you will need to add appropriate margin to your groups using utility classes, such as mx-2.
Just put the buttons in a class ( class="btn-toolbar" ) as told by bro Miroslav Popovic.It works awesome.
<div class="btn-toolbar">
<button type="button" id="btnSubmit" class="btn btn-primary btn-sm">Submit</button>
<button type="button" id="btnCancel" class="btn btn-primary btn-sm">Cancel</button>
</div>
You can use spacing for Bootstrap and no need for any additional CSS. Just add the classes to your buttons. This is for version 4.
What Dragan B suggested is right way to go for Bootstrap 4. I have put one example below. e.g. mr-3 is margin-right:1rem!important
<div class="btn-toolbar pull-right">
<button type="button" class="btn mr-3">btn1</button>
<button type="button" class="btn mr-3">btn2</button>
<button type="button" class="btn">btn3</button>
</div>
p.s: in my case I wanted my buttons to be displayed to the right of the screen and hence pull-right.
you should use bootstrap v.4
<div class="form-group row">
<div class="col-md-6">
<input type="button" class="btn form-control" id="btn1">
</div>
<div class="col-md-6">
<input type="button" class="btn form-control" id="btn2">
</div>
</div>
The easiest way in most situations is margin.
Where you can do :
button{
margin: 13px 12px 12px 10px;
}
OR
button{
margin: 13px;
}
Dragan B. solution is correct. In my case I needed the buttons to be spaced vertically when stacking so I added the mb-2 property to them.
<div class="btn-toolbar">
<button type="button" class="btn btn-primary mr-2 mb-2">First</button>
<button type="button" class="btn btn-primary mr-2 mb-2">Second</button>
<button type="button" class="btn btn-primary mr-2 mb-2">Third</button>
</div>
Here's another approach based on the documentation.
<div class="d-grid gap-2 d-md-flex" >
<button type="button" class="btn btn-outline-primary btn-sm">button1</button>
<button type="button" class="btn btn-outline-primary btn-sm">button2</button>
</div>
I used the Bootstrap 4 buttons plugin (https://getbootstrap.com/docs/4.0/components/buttons/#button-plugin)
and added the class rounded to the labels and the class mx-1 to the middle button to achieve the desired look and feel of separate radio buttons. Using the class btn-toolbar made the radio button circles appear for me which is not what I wanted. Hope this helps someone.
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary active rounded">
<input type="radio" name="options" id="option1" autocomplete="off" checked> Active
</label>
<label class="btn btn-secondary rounded mx-1">
<input type="radio" name="options" id="option2" autocomplete="off"> Radio
</label>
<label class="btn btn-secondary rounded">
<input type="radio" name="options" id="option3" autocomplete="off"> Radio
</label>
</div>
Another way to achieve this is to add a class .btn-space in your buttons
<button type="button" class="btn btn-outline-danger btn-space"
</button>
<button type="button" class="btn btn-outline-primary btn-space"
</button>
and define this class as follows
.btn-space {
margin-right: 15px;
}
I actual ran into the same requirement. I simply used CSS override like this
.navbar .btn-toolbar { margin-top: 0; margin-bottom: 0 }
if use Bootstrap, you can change with style like: If you want only in one page, then betwen head tags add .btn-group btn{margin-right:1rem;}
If is for all the web site add to css file
You could also just put the two buttons in a flexbox and set the gap with css
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Bootstrap -->
<link crossorigin="anonymous" href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" rel="stylesheet">
<script crossorigin="anonymous"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<div class="d-flex flex-row" style="gap:5px;">
<button type="button" class="btn btn-primary">Add to list</button>
<button type="button" class="btn btn-secondary">more</button>
</div>
I ended up doing something similar to what mark dibe did, but I needed to figure out the spacing for a slightly different manner.
The col-x classes in bootstrap can be an absolute lifesaver. I ended up doing something similar to this:
<div class="row col-12">
<div class="col-3">Title</div>
</div>
<div class="row col-12">
<div class="col-3">Bootstrap Switch</div>
<div>
This allowed me to align titles and input switches in a nicely spaced manner. The same idea can be applied to the buttons and allow you to stop the buttons from touching.
(Side note: I wanted this to be a comment on the above link, but my reputation is not high enough)