CODEWITHSUNDEEP
csstwitter-bootstraptwitter-bootstrap-3
Misiu
Misiu

Reputation: 4919

Bootstrap 3 btn-group width

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/

Upvotes: 23

Views: 63035

Answers (6)

max kaplan
max kaplan

Reputation: 589

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.

Upvotes: 1

ZerosAndOnes
ZerosAndOnes

Reputation: 1093

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%;
}

Upvotes: 0

Boaris
Boaris

Reputation: 5226

Another solution:

.btn-group {
    display: flex;
    flex-direction: row;
}

.btn-group > button {
    width: 100%;
}

Upvotes: 2

Schmalzy
Schmalzy

Reputation: 17324

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

Upvotes: 74

Markus Kottl&#228;nder
Markus Kottl&#228;nder

Reputation: 8268

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 + '%'
    )
});

Upvotes: 4

Valerie
Valerie

Reputation: 34

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).

Upvotes: 0

Related Questions