How to make visible buttons equal in width without hardcoding fixed width to each of them? Is there universal solution that will work with any size of button (as this is text dependent)
Here is the snipped:
<div class="btn-toolbar">
<button class="btn-success btn btn-default" name="resolution" value="corrected" type="submit">Submit</button>
<div class="pull-right btn-group">
<button class="btn-warning btn btn-default" name="resolution" value="skipped" type="submit">Skip</button>
<button class="btn-warning btn btn-default" name="resolution" value="not_found" type="submit">Not found</button>
</div>
</div>
It will not be a good thing to make all the buttons with a fixed width, because the buttons width will rely on the text of the button. It will not look good. But if it is a must for you then you can add a class to your button and assign a fixed width to that class on your css rule. Or you cal also directly set a fixed width to your button on your css. But I highly recommend not to do that as it is not going to look good. Adding code for both the scenarios
By Adding a class
<button class="btn-warning btn btn-default fixed_width" name="resolution" value="skipped" type="submit">Skip</button>
On your CSS file
.fixed_width{
width:**YOUR_DESIRED_WIDTH_GOES_HERE**;
}
Or by directly assigning -
button{
width:**YOUR_DESIRED_WIDTH_GOES_HERE**;
}
You can do this only by setting the required width of the button in the style. Here in the example I have given the required width to 100px. You can put this to your required value.
<!DOCTYPE HTML>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.btn{
width: 100px;
}
</style>
</head>
<body>
<div class="btn-toolbar">
<button class="btn-success btn btn-default" name="resolution" value="corrected" type="submit">Submit</button>
<div class="pull-right btn-group">
<button class="btn-warning btn btn-default" name="resolution" value="skipped" type="submit">Skip</button>
<button class="btn-warning btn btn-default" name="resolution" value="not_found" type="submit">Not found</button>
</div>
</div>
</body>
</html>
If I put several Bootstrap 3 buttons in a row:
<button class="btn btn-default">Button 1</button>
<button class="btn btn-default">Button 2</button>
<button class="btn btn-default">Button 3</button>
there is a small space between them. Where does it come from and how to remove it without using float? According to the Firebug and Chrome Inspector the buttons haven't any margin applied to them.
The newline between the buttons actually causes the space. Observe:
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<button class="btn btn-default">Button 1</button><button class="btn btn-default">Button 2</button><button class="btn btn-default">Button 3</button>
There is a button-group rule you can use if you want the buttons visually grouped: http://getbootstrap.com/components/#btn-groups
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<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>
I believe you style your buttons display:inline-block; or inline. By default they create spaces if you have newline character.
So to remove it, put those markups next to each other without newline char.
It would get messy, but will get what you want without having a style float
So do it like this :
<button class="btn btn-default">Button 1</button><button class="btn btn-default">Button 2</button><button class="btn btn-default">Button 3</button>
I have a button group containing 10 buttons. Under certain screen widths (responsive) I hide some of these buttons with media queries.
The problem is that if I hide the last button the new last button's edges do not become rounded.
It's a difficult problem to describe, but very easy to show in a Fiddle.
My question: how can I add the rounded corners to the last visible button in the button group, rather than simply the last button, as it currently is.
Code from Fiddle below, as per SO's rules:
<div class="btn-group" id="sortBtns" role="group">
<button type="button" class="btn btn-default">First</button>
<button type="button" class="btn btn-default">Second</button>
<button type="button" class="btn btn-default">Third</button>
<button type="button" class="btn btn-default">Fourth</button>
<button type="button" class="btn btn-default">Fifth</button>
<button type="button" class="btn btn-default">Sixth</button>
</div>
<div class="btn-group" id="sortBtns" role="group">
<button type="button" class="btn btn-default">First</button>
<button type="button" class="btn btn-default">Second</button>
<button type="button" class="btn btn-default">Third</button>
<button type="button" class="btn btn-default">Fourth</button>
<button type="button" class="btn btn-default">Fifth</button>
<button type="button" class="btn btn-default" style="display:none;">Sixth</button>
</div>
Note the lack of rounded corners on 'fifth' in the second button group.
I can do this using JavaScript by adding a new class to the last visible element, but I'd rather not. Is there a cleaner CSS-only solution?
If you don't mind adding a dependency, I recommend AngularJS' ng-if. It comes in handy when using css selectors that rely on an element's position within the DOM, such as the :first-child or :last-child pseudo-classes. It will remove the element from the DOM and allow you to achieve your goal.
Here's a solution using jQuery:
$('.btn-group').has('.btn:hidden').find('.btn').css('border-radius', 0);
$('.btn-group').has('.btn:hidden').find('.btn:visible:first').css({
'border-top-left-radius': '3px',
'border-bottom-left-radius': '3px',
});
$('.btn-group').has('.btn:hidden').find('.btn:visible:last').css({
'border-top-right-radius': '3px',
'border-bottom-right-radius': '3px',
});
For each button group with hidden buttons, this will remove the border radii for all buttons within, and then add back border radii for the first and last visible buttons.
OP's Fiddle with solution
One option is to simply duplicate the code and add an hidden-xs class the first code block and visible-xs to the other code block.
Like this:
<div class="btn-group hidden-xs" id="sortBtns" role="group">
<button type="button" class="btn btn-default">First</button>
<button type="button" class="btn btn-default">Second</button>
<button type="button" class="btn btn-default">Third</button>
<button type="button" class="btn btn-default">Fourth</button>
<button type="button" class="btn btn-default">Fifth</button>
<button type="button" class="btn btn-default">Sixth</button>
</div>
<div class="btn-group visible-xs" id="sortBtns2" role="group">
<button type="button" class="btn btn-default">First</button>
<button type="button" class="btn btn-default">Fifth</button>
<button type="button" class="btn btn-default">Sixth</button>
</div>
Another option is to apply the css rule to the edgy element:
.edgy-right-element {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
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
Does Bootstrap support fixed width buttons? Currently if I have 2 buttons, "Save" and "Download", the button size changes based on content.
Also what is the right way of extending Bootstrap?
You can also use the .btn-block class on the button, so that it expands to the parent's width.
If the parent is a fixed width element the button will expand to take all width. You can apply existing markup to the container to ensure fixed/fluid buttons take up only the required space.
<div class="span2">
<p><button class="btn btn-primary btn-block">Save</button></p>
<p><button class="btn btn-success btn-block">Download</button></p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="span2">
<p><button class="btn btn-primary btn-block">Save</button></p>
<p><button class="btn btn-success btn-block">Download</button></p>
</div>
To do this you can come up with a width you feel is ok for both buttons and then create a custom class with the width and add it to your buttons like so:
CSS
.custom {
width: 78px !important;
}
I can then use this class and add it to the buttons like so:
<p><button href="#" class="btn btn-primary custom">Save</button></p>
<p><button href="#" class="btn btn-success custom">Download</button></p>
Demo: http://jsfiddle.net/yNsxU/
You can take that custom class you create and place it inside your own stylesheet, which you load after the bootstrap stylesheet. We do this because any changes you place inside the bootstrap stylesheet might get accidentally lost when you update the framework, we also want your changes to take precedence over the default values.
If you place your buttons inside a div with class "btn-group" the buttons inside will stretch to the same size as the largest button.
eg:
<div class="btn-group">
<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>
Bootstrap Button Groups
For your buttons, you can create another CSS selector for those special classes of buttons with a specified min-width and max-width. So if your button is
<button class="save_button">Save</button>
In your Bootstrap CSS file you can create something like
.save_button {
min-width: 80px;
max-width: 80px;
}
This way it should always stay 80px even if you have a responsive design.
As far as the right way of extending Bootstrap goes, Take a look at this thread:
Extending Bootstrap
With BS 4 and BS 5, you can also use the sizing, and apply w-100 so that the button can occupy the complete width of the parent container.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
Using btn-block
</p>
<div class="container-fluid">
<div class="btn-group col" role="group" aria-label="Basic example">
<button type="button" class="btn btn-outline-secondary">Left</button>
<button type="button" class="btn btn-outline-secondary btn-block">Middle</button>
<button type="button" class="btn btn-outline-secondary">Right</button>
</div>
</div>
<p>
Using w-100
</p>
<div class="container-fluid">
<div class="btn-group col" role="group" aria-label="Basic example">
<button type="button" class="btn btn-outline-secondary">Left</button>
<button type="button" class="btn btn-outline-secondary w-100">Middle</button>
<button type="button" class="btn btn-outline-secondary">Right</button>
</div>
</div>
btn-group-justified and btn-group only work for static content but not on dynamically created buttons, and fixed with of button in css is not practical as it stay on the same width even all content are short.
My solution:
put the same class to group of buttons then loop to all of them, get the width of the longest button and apply it to all
var bwidth=0
$("button.btnGroup").each(function(i,v){
if($(v).width()>bwidth) bwidth=$(v).width();
});
$("button.btnGroup").width(bwidth);
Bootstrap 5+
Use grid columns to set the width and the margin end utility to set margin between them:
<div>
Here are two buttons:
<button class="btn btn-primary col-3 me-2">PressMe</button>
<button class="btn btn-primary col-3">PressMeToo</button>
</div>
Expanding #kravits88 answer:
This will stretch the buttons to fit whole width:
<div className="btn-group-justified">
<div className="btn-group">
<button type="button" className="btn btn-primary">SAVE MY DEAR!</button>
</div>
<div className="btn-group">
<button type="button" className="btn btn-default">CANCEL</button>
</div>
</div>
A block width button could easily become responsive button if the parent container is responsive. I think that using a combination of a fixed width and a more detailed selector path instead of !important because:
1) Its not a hack (setting min-width and max-width the same is however hacky)
2) Does not use the !important tag which is bad practice
3) Uses width so will be very readable and anyone who understands how cascading works in CSS will see whats going on (maybe leave a CSS comment for this?)
4) Combine your selectors that apply to your targeted node for increased accuracy
.parent_element .btn.btn-primary.save-button {
width: 80px;
}
Just came upon the same need and was not satified with defining fixed width.
So did it with jquery:
var max = Math.max ($("#share_cancel").width (), $("#share_commit").width ());
$("#share_cancel").width (max);
$("#share_commit").width (max);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="btn btn-secondary" id="share_cancel">SHORT</button>
<button type="button" class="btn btn-success" id="share_commit">LOOOOOOOOONG</button>
Best way to the solution of your problem is to use button block btn-block with desired column width.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-12">
<button class="btn btn-primary btn-block">Save</button>
</div>
<div class="col-md-12">
<button class="btn btn-success btn-block">Download</button>
</div>
Here I found a solution by comparing buttons in a button-group element. The simple solution is to get the one with the largest width and set the width to the other buttons. So they can have a equal width.
function EqualizeButtons(parentElementId) {
var longest = 0;
var element = $(parentElementId);
element.find(".btn:not(.button-controlled)").each(function () {
$(this).addClass('button-controlled');
var width = $(this).width();
if (longest < width) longest = width;
}).promise().done(function () {
$('.button-controlled').width(longest);
});
}
It worked like a charm.
This may be a silly solution, but I was looking for a solution to this problem and got lazy.
Anyway, using input class="btn..." ... instead of button and padding the value= attribute with spaces so that they are all the same width works pretty well.
eg :
<input type="submit" class="btn btn-primary" value=" Calculate "/>
<input type="reset" class="btn btn-primary"value=" Reset "/>
I haven't been using bootstrap all that long, and maybe there is a good reason not to use this approach, but thought I might as well share