Bootstrap 3 Btn-Group Width

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



Leave a reply



Submit