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?

Answer 1

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

Answer 2

For React-Bootstrap users:

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