CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Will F
Will F

Reputation: 191

equal sizing with Bootstrap btn-groups within btn-toolbar

I have two button groups containing two buttons each within a toolbar (so 4 buttons total), and want each button to be the same size, and distributed evenly in the parent div (in this case a bootstrap column. Is there a simple way to do this?

JSfiddle: https://jsfiddle.net/jh9sdurg/

The first row is what I am working with: buttons with unequal label lengths, and the second row is an example of how I want it to look, but I can only accomplish that using labels of equal lengths (eg. 'a', 'b', 'c').

<body>
<div class="container">
    <div class="row">
        <div class="col-xs-3">
            <div class="row">
                <div class="btn-toolbar">
                    <div class="btn-group" data-toggle="buttons">
                        <label class="btn btn-default active" id="qwerty">a<input id="qwerty" type="radio"></label><label class="btn btn-default" id="lButton1">aa<input id="qwerty" type="radio"></label>
                    </div>
                    <div class="btn-group" data-toggle="buttons">
                        <label class="btn btn-default active" id="qwerty">bbbbb<input id="qwerty" type="radio"></label><label class="btn btn-default" id="qwerty">bb<input id="qwerty" type="radio"></label>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xs-9" style="background: gray;">
            col-xs-9
        </div>
    </div>
    <div class="row">
        <div class="col-xs-3">
            <div class="row no-gutters">
                <div class="btn-toolbar">
                    <div class="btn-group btn-block-3" data-toggle="buttons">
                        <label class="btn btn-default btn-block-2 active" id="qwerty">aa<input id="qwerty" type="radio"></label><label class="btn btn-default btn-block-2" id="qwerty">aa<input id="qwerty" type="radio"></label>
                    </div>
                    <div class="btn-group btn-block-3" data-toggle="buttons">
                        <label class="btn btn-default btn-block-2 active" id="qwerty">bb<input id="qwerty" type="radio"></label><label class="btn btn-default btn-block-2" id="qwerty">bb<input id="qwerty" type="radio"></label>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xs-9" style="background: gray;">
            col-xs-9
        </div>
    </div>
</div>

Upvotes: 0

Views: 377

Answers (1)

del cueto
del cueto

Reputation: 111

You can override Bootsrap styling by using another css file or inline styling. I went with a simple and quick way to fix this is to add the style = width:50%; on each of the buttons. They would look something like this: enter image description here

<label class="btn btn-default active" id="qwerty" style= "width: 50%">a<input id="qwerty" type="radio"></label>
<label class="btn btn-default" style= "width: 50%"id="lButton1">aaa<input id="qwerty" type="radio"></label>

I forgot to add that I wrapped the buttons in a <div class = "col-xs-1"> </div> , if you don't add that then the buttons will fill the <div class = "col-xs-3"></div> that they were originally on. Like this: enter image description here

Upvotes: 1

Related Questions