Menu
I'm playing around with Bootstrap 4 (alpha 6), and I'm liking what I see so far. One issue I've come across, is how to make a btn-group with checkbox/radios in, that will move onto a 2nd line once it gets too wide for the page. So an example:
http://codepen.io/youradds/pen/KaBJEm
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-secondary">
<input type="checkbox" name="foo" class="checkbox" value="1" autocomplete="off" />
Piscine
</label>
<label class="btn btn-secondary">
<input type="checkbox" name="foo" class="checkbox" value="1" autocomplete="off" />
Piscine
</label>
.... loads of other buttons too
</div>
As per this documentation:
http://v4-alpha.getbootstrap.com/components/buttons/#checkbox-and-radio-buttons
If you scale the CodePen down in width, you will see what I mean. What I would like to happen, is for it to move onto a 2nd line (instead of forcing the page width to accommodate it).
Is this even possible?
809
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.
“Button Groups” in Bootstrap is a class of name “btn-group” which is used to create series of buttons in groups (without spaces) vertically or horizontally. This is the basic syntax of the button group class where each button has its own class of “btn”.
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.
The btn-group like many other elements in Bootstrap 4, now use flexbox. There are also new flexbox utilities to enable custom behavior.
In this case you can simply use flex-wrap...
<div class="btn-group flex-wrap" data-toggle="buttons">
...
</div>
https://www.codeply.com/go/8MYqS2EWGO
155
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
