Menu
How can I prevent bootstrap button goups from breaking in to 2 lines when there is less space?
I am trying to use the below Bootstrap code:
<div class="btn-group" style=" width:100px ;">
<button type="button" class="btn btn-default" style=" width:30px;">-</button>
<input type="text" class="form-control" style="width:30px;">
<button type="button" class="btn btn-default" style=" width:30px;"> +</button>
</div>
And it looks like:
880
Bootstrap 5 allows you to group a series of buttons together (on a single line) in a button group: Use a <div> element with class .btn-group to create a button group:
Button group wraps a series of buttons together into a single line (navbar} or stack in a vertical column. Many examples and simple tutorials. Group a series of buttons together on a single line with the button group. Wrap a series of buttons with .btn in .btn-group.
To span the entire width of the screen, use the .btn-group-justified class: Note: For <button> elements, you must wrap each button in a .btn-group class: Add a Bootstrap class to group the buttons together.
Group a series of buttons together on a single line with the button group. Wrap a series of buttons with .btn in .btn-group. In order for assistive technologies (such as screen readers) to convey that a series of buttons is grouped, an appropriate role attribute needs to be provided.
This is what worked for me, turn the group of buttons to a flex item (by default it does not wrap):
.btn-group {
display: flex;
}
I saw this here, and there are more options too: https://github.com/twbs/bootstrap/issues/9939
146
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
