Button group not wrapping when too long

Question

I have a very long button group : https://jsfiddle.net/cyu4bvak/

<div class="btn-group" data-toggle="buttons">
    <label  class="btn btn-primary active">
        <input type="checkbox" />ABCDEFGHIJKLMNOPQRSTUVWXYZ
    </label>
    <label  class="btn btn-primary active">
        <input type="checkbox" />ABCDEFGHIJKLMNOPQRSTUVWXYZ
    </label>
    <label  class="btn btn-primary active">
        <input type="checkbox" />ABCDEFGHIJKLMNOPQRSTUVWXYZ
    </label>
    ...
</div>

Whatever the size of the viewport it is always taking one long line causing scrolling.

Is it possible to make it wrap so that on smaller viewports it will wrap on more lines without causing scrolling?

If no which alternative(s) do I have to obtain the expected behavior?

Ronald

Answer 1

Add flex-wrap: wrap; to the flex parent (.btn-group) if you want the flex children to wrap.

Roberge

Simply brilliant! Thanks a lot. :-) – Ronald

@Ronald fo sho! – Roberge

when one button alone wraps onto the next line it doesn't look great, so I wanted to put the last three buttons in another div, so that a min of 3 buttons wrap. But when I do this, the last div always begins on a new line. Any solution to that? – Avogadro

YOU ARE THE MAN – Wanyen

Answer 2

For React-Bootstrap users:

<ButtonGroup style={{ flexWrap: "wrap" }}>
...
</ButtonGroup>

Virulent

Answer 3

In Bootstrap 5 you can add flex-wrap class to element with btn-group.

Luckey

Answer 4

Using flex-wrap: wrap; on the container is a great option, although sometimes I think it looks strange to have different sized buttons:

It's a little better if you also set flex: 0 !important; on each button, but the jagged block still isn't visually appealing to me:

Sometimes, I prefer a vertical column of buttons for screens below a certain width. For example:

@media screen and (max-width: 600px) {
  .btn-group {
    flex-direction: column;
  }
}

With a few more styles, you can also get nicely rounded corners:

Here is the full code:

/* Responsive: Use a vertical column if under 450px wide */
@media screen and (max-width: 450px) {
  .btn-group {
    flex-direction: column;
  }
  .btn-group .btn {
    border-radius: 0 !important;
    margin-left: 0px !important;
    margin-top: -1px !important;
  }
  .btn-group .btn:first-child {
    border-top-left-radius: 4px !important;
    border-top-right-radius: 4px !important;
  }
  .btn-group .btn:last-child {
    border-bottom-left-radius: 4px !important;
    border-bottom-right-radius: 4px !important;
  }
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <h2>Responsive Button Group</h2>
  <div class="btn-group">
    <button type="button" class="btn btn-outline-primary">Samsung</button>
    <button type="button" class="btn btn-outline-primary">Apple</button>
    <button type="button" class="btn btn-outline-primary">Xiaomi</button>
    <button type="button" class="btn btn-outline-primary">Huawei</button>
    <button type="button" class="btn btn-outline-primary">Oppo</button>
    <button type="button" class="btn btn-outline-primary">Vivo</button>
  </div>
</div>

P.S. In case it wasn't clear, both flex-direction: column; and flex-wrap: wrap; work for both btn-group and btn-group-toggle.

Machinegun

Thanx for your example. I used the jagged Block but also put a border around it so that it looks better. – Spradling

Answer 5

Adding flex-wrap to the button group will work in boot strap 5, but you should add flex-grow-0 to each button so buttons will not grow to fill the container width

Ashly