1

I'd like to ensure two radio buttons within a button group occupy an equal amount of width:

<div class="d-flex btn-group" role="group" aria-label="Basic radio toggle button group">
    <input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked>
    <label class="btn btn-outline-primary" for="btnradio1">Text</label>
    <input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off">
    <label class="btn btn-outline-primary" for="btnradio2">More Text</label>
</div>

Is this possible?

At the moment, the button with more text is wider.

Thanks

Md. Fazlul Hoque
  • 15,806
  • 5
  • 12
  • 32
Ben Sullivan
  • 11
  • 2

1 Answers1

0

For your particular setup, I would recommend you create a container div around each input and label pair. Since you already have d-flex on your btn-group, you can make use of the the flex properties.

Select the btn-container divs in your CSS, and give them a flex-basis: 100px (you can change the pixel value to whatever size you need). They will be the same width. You can also use percentage values, for example, if you have 4 buttons, you can give each btn-container a flex-basis: 25% for equal distribution.

.d-flex {
  display: flex;
}

.btn-container {
  flex-basis: 100px;
}
<link href="https://cdn.bootstrap.css" rel="stylesheet"/>
<div class="d-flex btn-group" role="group" aria-label="Basic radio toggle button group">
    <div class="btn-container">
      <input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked/>
      <label class="btn btn-outline-primary" for="btnradio1">Text</label>
    </div>
    <div class="btn-container">
      <input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off"/>
      <label class="btn btn-outline-primary" for="btnradio2">More Text</label>
    </div>
</div>

If you are hiding the radio input and only displaying the labels you can do it like this:

.d-flex {
  display: flex
}

input {
  position: absolute;
  width: 0.01px;
}

label {
  border: 1px solid black;
  padding: 1rem 2rem;
  flex-basis: 50%;
}

input:checked + label {
  background-color: blue;
}
<div class="d-flex btn-group" role="group" aria-label="Basic radio toggle button group">
        <input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off">
        <label class="btn btn-outline-primary" for="btnradio1">Text</label>
        <input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off">
        <label class="btn btn-outline-primary" for="btnradio2">More Text</label>
</div>

If you are using bootstrap, you don't need to put the extra styles on the btn group that I did. Just put the flex basis on the label.

PsiKai
  • 1,803
  • 1
  • 5
  • 19