twitter bootstrap - First item in toggle button group with fixed width buttons taller

Question

I have 5 items in a button group, when they are different widths (based on the text in each button) it works fine:

<div class="btn-group btn-group-toggle" data-toggle="buttons">
    <label class="btn btn-outline-primary btn-md active">
        <input type="radio" name="options" id="option1" checked> Strongly Disagree22222
    </label>
    <label class="btn btn-outline-primary btn-md">
        <input type="radio" name="options" id="option2"> Disagree
    </label>
    <label class="btn btn-outline-primary btn-md">
        <input type="radio" name="options" id="option3"> Unsure
    </label>
    <label class="btn btn-outline-primary btn-md">
        <input type="radio" name="options" id="option4"> Agree
    </label>
    <label class="btn btn-outline-primary btn-md">
        <input type="radio" name="options" id="option5"> Strongly Agree
    </label>
</div>

I'm trying to use 'btn-block' to make each button the same width, and it works for that, but the first item is taller.

How can I use btn-block to get this working, or how can I use a different method to get all the buttons to be the same width (ideally together taking up the full container width).[![enter image description here][2]][2]

<div class="btn-group btn-group-toggle" data-toggle="buttons">
    <label class="btn btn-outline-primary btn-block">
        <input type="radio" name="options" id="option1"> Strongly121212
    </label>
    <label class="btn btn-outline-primary btn-block">
        <input type="radio" name="options" id="option2"> Disagree
    </label>
    <label class="btn btn-outline-primary btn-block" active>
        <input type="radio" name="options" id="option3" checked> Unsure
    </label>
    <label class="btn btn-outline-primary btn-block">
        <input type="radio" name="options" id="option4"> Agree
    </label>
    <label class="btn btn-outline-primary btn-block">
        <input type="radio" name="options" id="option5"> Strongly Agree
    </label>
</div>

Note, I need these to be radio buttons. The user must be able to select 1 item (I like the outline with one selected solidly like in the example as it's obvious what's selected).

I found this, but it doesn't work for radio buttons, it's check boxes: btn-group create first button too hight

I spent many hours looking and could find nothing.

question from:https://stackoverflow.com/questions/65904831/first-item-in-toggle-button-group-with-fixed-width-buttons-taller

Answer 1

Waitting for answers