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?

score 18 · Accepted Answer · answered Jan 13 '17 at 00:06

18

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

answered Jan 13 '17 at 00:06

Michael Coker

52,626
5
64
64

Simply brilliant! Thanks a lot. :-) – Pragmateek Jan 13 '17 at 00:24
@Pragmateek fo sho! – Michael Coker Jan 13 '17 at 00:42
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? – Andrei Cleland Nov 16 '21 at 00:39
YOU ARE THE MAN – Bilaal Abdel Hassan Feb 03 '22 at 17:43

score 3 · Answer 2 · answered Sep 16 '20 at 19:17

3

For React-Bootstrap users:

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

answered Sep 16 '20 at 19:17

sebtheiler

2,159
3
16
29

score 2 · Answer 3 · answered Dec 02 '21 at 15:20

2

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

answered Dec 02 '21 at 15:20

Bartłomiej Jakub Kwiatek

197
4
12

score 2 · Answer 4 · answered Mar 04 '22 at 20:30

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/bootstrap@4.6.1/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.

score 0 · Answer 5 · answered Jul 11 '22 at 09:45

0

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

answered Jul 11 '22 at 09:45

appa1302

1

Button group not wrapping when too long

5 Answers5