make btn-group responsive

Question

I have a very long list of buttons and I need to group them, but also display them nicely. And right now, The design doesn't split in rows. I have bootstrap 4

<div class="btn-group" data-toggle="buttons">
          <label class="btn btn-primary">
            <input type="checkbox" name="bla" id="2" autocomplete="off" value="2" > bla bla
          </label>
          <label class="btn btn-primary">
            <input type="checkbox" name="bla2" id="2" autocomplete="off" value="2" > bla bla
          </label>
... (and so on)

Thanks

score 72 · Answer 1 · answered Jun 15 '18 at 21:11

72

Add the .flex-wrap class to your button group container.

<div class="btn-group flex-wrap" data-toggle="buttons">

answered Jun 15 '18 at 21:11

Jason Conville

1,025
10
10

This should be the accepted answer. Works for me with Bootstrap 5 – HBCondo Jun 13 '22 at 20:06
Bootstrap 4 as well. – ViaTech Mar 17 '23 at 13:31

score 2 · Answer 2 · answered Oct 02 '18 at 17:31

2

If, like me, you don't necessarily need the buttons to be in a group, you could also use the btn-toolbar class which defines flex-wrap: wrap by default.

<div class="btn-toolbar" data-toggle="buttons">

answered Oct 02 '18 at 17:31

Perry

611
6
15

score 1 · Answer 3 · 2021-04-01T10:24:22.280

You don't need bootstrap, you can use this, works good for three buttons, P.S. you might find some extra CSS b/c i copy - pasted this from another code also, this is one of the first things I ever created so naming might not be good, anyways, Hope this Helps!

body {
  overflow-x: hidden;
}
.button {
  border: 1.2vh groove rgb(200, 200, 200);
  margin: 1.5vh 1vw;
  width: 28vw;
  font-size: 2vw;
  transition: all 1s ease-in-out;
}

#laptop {
  float: left;
  width: 65%;
}

#tablet {
  float: left;
  width: 50%;
}

@media only screen and (orientation: landscape) {
  .button,
  #instructions {
    font-size: 2vh;
  }
}

@media only screen and (max-width: 1160px) {
  #laptop {
    float: none;
    width: 100%;
  }
  #tablet {
    float: left;
    width: 50%;
  }
  .button {
    width: 45vw;
    font-size: 4vw;
  }
}

@media only screen and (max-width: 485px) {
  #laptop {
    width: calc(95vw - 32px);
  }
  #tablet {
    float: none;
    width: calc(95vw - 32px);
  }
  .button {
    width: calc(95vw - 32px);
    font-size: 4vw;
  }
}

<div id="laptop">
  <button type="button" id="b1" class="button" onclick="">Click to</button>
  <div id="tablet">
    <button type="button" id="b2" class="button" onclick=""> Click to</button>
  </div>
</div>
<button type="button" id="b3" class="button" onclick=""> Click to</button>

make btn-group responsive

3 Answers3