Search code examples
csstwitter-bootstrapresponsive-designtwitter-bootstrap-4buttongroup

Button group not wrapping when too long

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?

Solution

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