Bootstrap 3 btn-group width
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">
<a href="#" class="btn btn-default" role="button">Left</a>
<a href="#" class="btn btn-default" role="button">Middle</a>
<a href="#" class="btn btn-default" role="button">Right</a>
</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
How to get button groups that span the full width of a parent in Bootstrap?
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>
Set a button group's width to 100% and make buttons equal width?
BOOTSTRAP 2 (source)
The problem is that there is no width set on the buttons. Try this:
.btn {width:20%;}
EDIT:
By default the buttons take an auto width of its text length plus some padding, so I guess for your example it is probably more like 14.5% for 5 buttons (to compensate for the padding).
Note:
If you don't want to try and compensate for padding you can use box-sizing:border-box;
http://www.w3schools.com/cssref/css3_pr_box-sizing.asp
Bootstrap full width buttons .btn-group-vertical
The btn-group-vertical has an automatic set width of 85px as far as I can see. Setting it to 100%, fixes your problem. It should be done in a stylesheet, but under is an inline solution:
<div class="container">
<div class="btn-group-vertical" style="width: 100%;">
<a href="3overview.php" class="btn btn-primary">Overview</a>
<a href="" class="btn btn-primary">Button</a>
<a href="" class="btn btn-primary">Button</a>
<a href="" class="btn btn-primary">Button</a>
<br>
<a href="" class="btn btn-warning">Button</a>
<a href="" class="btn btn-danger">Button</a>
</div>
</div>
EDIT: While this works, I'd go with Vlads answer instead. It is better than mine. And works as well. Although, you do not have to add the class to the individual buttons. Adding the class to the button group is enough. Like this:
<div class="container">
<div class="btn-group-vertical btn-block" style="width: 100%;">
<a href="3overview.php" class="btn btn-primary">Overview</a>
<a href="" class="btn btn-primary">Button</a>
<a href="" class="btn btn-primary">Button</a>
<a href="" class="btn btn-primary">Button</a>
<br>
<a href="" class="btn btn-warning">Button</a>
<a href="" class="btn btn-danger">Button</a>
</div>
</div>
Button and button group with same width
How's this?
I created a separate class for grouped buttons so that they could have separate stylings.
SIDE NOTE
Bootstrap buttons are styled to be responsive as the viewport changes. So styling them as you did may work, but may not be responsive unless you add your own media queries in CSS to change the size of them as the viewport changes.
.menu_button { min-width: 170px !important; max-width: 200px !important;}.menu_button_grouped { min-width: 104px !important; max-width: 134px !important;}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/><div class="container"><div class="row"><div class="btn-toolbar"> <div class="btn-group"> <button class="btn btn-default menu_button">First</button> </div> <div class="btn-group"> <button class="btn btn-default menu_button">Second</button> </div> <div class="btn-group"> <button class="btn btn-default"><</button> <button class="btn btn-default menu_button_grouped">3rd</button> <button class="btn btn-default">></button> </div> <div class="btn-group"> <button class="btn btn-default"><</button> <button class="btn btn-default menu_button_grouped">4th</button> <button class="btn btn-default">></button> </div></div></div></div>
Is it possible to have buttons with different widths while using bootstraps btn-group-justified layout?
The btn-group-justified
class has a fixed table-layout so the child elements with a btn-group
class act like table cells. You just need to change their width.
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css');
body { margin-top: 10px;}
.btn-group-justified > .btn-group:nth-of-type(odd) { width: .25%;}
<div class="container"> <div class="row"> <div class="col-md-12"> <div class="btn-group btn-group-justified" role="group" aria-label=""> <div class="btn-group" role="group"> <button type="button" class="btn btn-danger"><span class="glyphicon glyphicon-minus-sign"></span></button> </div> <div class="btn-group" role="group"> <button type="button" class="btn btn-default"><span class="badge">1</span> Bottle Mango</button> </div> <div class="btn-group" role="group"> <button type="button" class="btn btn-danger"><span class="glyphicon glyphicon-minus-sign"></span></button> </div> <div class="btn-group" role="group"> <button type="button" class="btn btn-default"><span class="badge">1</span> Bottle Junk</button> </div> </div> </div> </div></div>
Using block buttons in a Bootstrap button group div
Try this:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/><div class="container text-center"> <div class="btn-group w-100" role="group"> <button type="button" class="btn w-50 btn-primary"> Back </button> <button type="submit" class="btn w-50 btn-primary"> Next </button> </div></div>
Related Topics
Why Calc Is Not Reevaluated When It Is Used for Font-Size
Possible to Set Hex Color Opacity Independently
Error While Using The Custom Fonts in CSS
Can a Div Fill Up The Entire Viewport with a Pixel-Based Margin, Not Using The CSS3 Calc Property
Vuetify Without Vue-Cli Sass/Scss Conflict
Set Chart Area Background Color in Rcharts/Slidify/Nvd3
CSS Absolute Positioned Elements and Margins
Javafx 8 - How to Change The Color of The Prompt Text of a Not Editable Combobox via CSS
Is It Possible in CSS to Transition Through a Third Color When Using a Hover Transition
How to Use Nth-Child Correctly
Flex-Basis for Wrapping Columns
Gotham Book' Font-Family Not Working in Safari Browser and iPhone Devices
Why Does Bem Often Use Two Underscores Instead of One for Modifiers
Overlay a Background-Image with an Rgba Color, with a CSS3 Transition