CODEWITHSUNDEEP
cssbootstrap-4responsive
Robert Rouge
Robert Rouge

Reputation: 289

make btn-group responsive

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

Upvotes: 25

Views: 23339

Answers (3)

user15518831
user15518831

Reputation:

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>

Upvotes: 0

Perry
Perry

Reputation: 611

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">

Upvotes: 2

Jason Conville
Jason Conville

Reputation: 1075

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

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

Upvotes: 77

Related Questions