Bootstrap 3 btn-group width

user_965722 0
Viewed 62367

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/

twitter-bootstrap-3 twitter-bootstrap css
6 Answers

Another solution:

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

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

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.

user_10189960

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