How can I prevent bootstrap button goups from breaking in to 2 lines when there is less space?
I am trying to use the below Bootstrap code:
<div class="btn-group" style=" width:100px ;">
<button type="button" class="btn btn-default" style=" width:30px;">-</button>
<input type="text" class="form-control" style="width:30px;">
<button type="button" class="btn btn-default" style=" width:30px;"> +</button>
</div>
And it looks like:
This is what worked for me, turn the group of buttons to a flex item (by default it does not wrap):
.btn-group {
display: flex;
}
I saw this here, and there are more options too:
https://github.com/twbs/bootstrap/issues/9939
Related
I'm using Bootstrap 4 and I want to align two buttons inside a table column. The buttons are of the same size, but the second one is inside of a form.
I tried using the button group approach which almost solves the situation, but unfortunately there's a small gap between the buttons:
<td class="text-right">
<div class="btn-group" role="group">
<button type="button" class="btn btn-sm btn-secondary">Edit</button>
<form action="" method="POST">
<button type="button" class="btn btn-sm btn-danger">Delete</button>
</form>
</div>
</td>
What utility class can I use or any additional css in order to have the buttons aligned on the same level?
P.S. It doesn't have to be the button group, it can be any other technique as long as the buttons are on the same line.
Following the same strategy used to align columns in the bootstrap, its td can be of the row class, surrounded by items in the class col-md , col-lg, col-sm.
Try this:
HTML
<td class="text-right row">
<div class="btn-group" role="group">
<div class="col-md-6 custom">
<button type="button" class="btn btn-sm btn-secondary">Edit</button>
</div>
<div class="col-md-6 custom">
<form action="" method="POST">
<button type="button" class="btn btn-sm btn-danger">Delete</button>
</form>
</div>
</div>
</td>
Customize your column with a custom CSS
CSS
.custom {
padding-right: 5px;
padding-left: 5px;
}
https://jsfiddle.net/braulioti/aq9Laaew/160600/
This question already has answers here:
Two inline-block elements, each 50% wide, do not fit side by side in a single row
(9 answers)
Closed 5 years ago.
I have tried to inspect a "Buttons" example from Bootstrap 4. They have a nice-looking row of buttons, like this:
http://getbootstrap.com/docs/4.0/components/buttons/
But I don't understand, where does the space between buttons is coming from.
This is not margin, not flex-box aligning, not a transparent border.
So, how it works? Actually, I disabled all the styles in dev-tools, but that space did not disappear.
The space is there because there's whitespace between the HTML elements. If you remove the whitespace, the buttons will be positioned next to each other.
Note that whitespace (newline) between the elements is condensed to a single space by the browser.
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
Now if we remove the whitespace:
<button type="button" class="btn btn-primary">Primary</button><button type="button" class="btn btn-secondary">Secondary</button>
If you check with firefox the space coming from here please check screenshot:
You can remove the space by adding your own css rule like merging or padding.
Thanks
The space is coming because buttons are inline elements by default...it is not a bug..its just the way inline elements align in browsers...
So remove all the space from your coding is a solution, which I don't think I will do, because if you are coding your code should look good...right..
As you are using bootstrap4 you can use bootstrap d-flex class
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="parent d-flex">
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
</div>
Another solution is you can set the font-size of the parent of buttons to 0 and then set the font-size of buttons to the default one
Stack Snippet
.parent {
font-size: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="parent">
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
</div>
You can solve it using simple parent element to flex
<div class="button">
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
</div>
<style>
.button{
display: flex;
}
.button > button{
display: inline-block;
}
</style>
I am using bootstrap button groups for formatting on my desktop display of my webpage for groups of check boxes and radio buttons. However, when the button group is displayed on a mobile device it doesn’t look correct. I am wondering if there is an easy way of removing these formats to display standard check boxes and radio buttons. Thank you for your help.
<div class="container">
<div class="col-md-6">
<div class="btn-group" data-toggle="buttons">
<label id="label1" class="btn btn-default">
<input type="checkbox" name="popcorn" value="popcorn">Popcorn</input>
</label>
<label id="label2" class="btn btn-default">
<input type="checkbox" name="pictures" value="pictures">Pictures</input>
</label>
<label id="label3" class="btn btn-default">
<input type="checkbox" name="events" value="events">Events</input>
</label>
</div> </div></div></div>
UPDATE:
I guess I should add that it's wrapped in columns. The display-inline suggestion had no effect
something like this?
https://jsfiddle.net/dalinhuang/31gz6dh4/4/
.btn {
float: none;
display: inline-block;
overflow: hidden;
}
.btn-group {
display: flex;
}
or you want overflow:
https://jsfiddle.net/dalinhuang/31gz6dh4/2/
or in the center:
https://jsfiddle.net/dalinhuang/31gz6dh4/3/
I'd like to create a vertical button group, containing a horizontal button group, and a few buttons inside. My attempt looks like this:
<div class="btn-group-vertical">
<div class="btn-group">
<button type="button" class="btn btn-primary" style="width : 60%">Row 1.1</button>
<button type="button" class="btn btn-primary" style="width : 40%">Row 1.2</button>
</div>
<button type="button" class="btn btn-primary">Row 2</button>
<button type="button" class="btn btn-primary">Row 3</button>
</div>
I want button Row 1.1 and Row 1.2 to be in one row.
Enclose your button group in a row class:
<div class="row">
<div class="btn-group">
<button type="button" class="btn btn-primary" style="width : 60%">Row 1.1</button>
<button type="button" class="btn btn-primary" style="width : 40%">Row 1.2</button>
</div>
</div>
Check the Codepen. You might wanna change the width/border the way you want it.
EDIT
As for the buttons not being rounded, here's the class responsible for it, you can change it:
.btn-group-vertical > .btn:not(:first-child):not(:last-child) {
border-radius: 0;
}
From bootstrap.css, the btn class has a border-radius: 4px :
.btn {
...
border: 1px solid transparent;
border-radius: 4px;
}
You can either remove all the radius or change the second button to have the same border-radius
New Codepen
I have another Bootstrap related problem.
I want to add radio and checkboxes to my form, I would like them also to take 100% width of form element.
I've added button group as this:
<div class="form-group">
<label class="col-sm-3 control-label">Subscribe</label>
<div class="col-sm-9">
<div class="btn-group input-group" data-toggle="buttons">
<label class="btn btn-success">
<input type="radio" name="options" id="option1" />Yes</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option2" />Maybe</label>
<label class="btn btn-danger">
<input type="radio" name="options" id="option3" />No</label>
</div>
</div>
</div>
This gives me nice radio-like buttons:
But as You can see they have fixed width. Can this be fixed with bootstrap classes?
Again here is my sample code: http://jsfiddle.net/Misiu/yy5HZ/5/
Use the built in .btn-group-justified class: Offical Docs
Make a group of buttons stretch at equal sizes to span the entire
width of its parent. Also works with button dropdowns within the
button group.
Anchors:
<div class="btn-group btn-group-justified" role="group" aria-label="Justified button group">
Left
Middle
Right
</div>
Buttons:
To use justified button groups with <button> elements, you must wrap
each button in a button group. Most browsers don't properly apply our
CSS for justification to <button> elements, but since we support
button dropdowns, we can work around that.
<div class="btn-group btn-group-justified" role="group" aria-label="Justified button group">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Left</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Middle</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Right</button>
</div>
</div>
JSFiddle
You can simply use the bootstrap col-n classes so if you have 2 buttons you use col-xs-6 on them. The problem is when you have 5 buttons for example. There is no class for that in the bootstrap grid system. So I woul use one of the following:
To differenciate between groups with different number of buttons use additional custom classes:
JSFiddle
CSS
.btn-group {
width: 100%;
}
.btn-group-2 label.btn {
width: 50%;
}
.btn-group-3 label.btn {
width: 33.3%;
}
HTML
<div class="btn-group btn-group-3 input-group" data-toggle="buttons">
<label class="btn btn-success">
<input type="radio" name="options" id="option1" />Yes</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option2" />Maybe</label>
<label class="btn btn-danger">
<input type="radio" name="options" id="option3" />No</label>
</div>
If you want to avoid these css classes you can only use jQuery:
JSFiddle
$('.btn-group').each(function(index, item) {
$(item).find('.btn').css(
'width', 100 / $(item).find('.btn').length + '%'
)
});
Another solution:
.btn-group {
display: flex;
flex-direction: row;
}
.btn-group > button {
width: 100%;
}
For boostrap 4 the docs say you can do this:
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.
You can just add a class of your own and give them a 33% width (for the 3 buttons) or 50% width (for the 2 buttons).
If #Schmalzy's solution doesn't work then you might be using Bootstrap v3.0.0, for which add the following styles in addition to the html markup in #Schmalzy's solution.
.btn-group-justified > .btn-group .btn {
width: 100%;
}
.btn-group-justified > .btn, .btn-group-justified > .btn-group {
display: table-cell;
float: none;
width: 1%;
}