Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 847
Robert Rouge Avatar asked Mar 08 '18 15:03

Robert Rouge


People also ask

How do I make a button group responsive?

Add the . flex-wrap class to your button group container. Show activity on this post. 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.

What is the difference between button and button Group in Bootstrap?

Button groups allow multiple buttons to be stacked together on a single line. This is useful when you want to place items like alignment buttons together. You can add on optional JavaScript radio and checkbox style behavior with Bootstrap Button Plugin. This class is used for a basic button group.

How multiple buttons can be created at once by Bootstrap?

Instead of applying button sizing classes to every button in a group, just add . btn-group-* to each . btn-group , including each one when nesting multiple groups.

Which class is used to group button together?

btn-group class is used to create horizontally arranged button groups. Example: html.


1 Answers

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

<div class="btn-group flex-wrap" data-toggle="buttons">
like image 83
Jason Conville Avatar answered Nov 16 '22 00:11

Jason Conville