Hello there,
I'm encountering a minor issue with bootstrap button groups. It seems like I may be missing something or not doing it correctly. I've hit a roadblock and could really use some guidance on this matter.
Inside a bootstrap group, I have multiple buttons that are aligned perfectly and look great, except for mobile devices.
Upon resizing the window, I noticed that the buttons remain horizontally aligned instead of forming a column layout as bootstrap usually does.
Ideally, I would like the buttons to rearrange themselves in a row, making them more mobile-friendly and creating a toolbar effect.
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="btn-group mr-2" role="group" aria-label="button group">
<button type="button" class="btn btn-default">button one</button>
<button type="button" class="btn btn-default">button two</button>
<button type="button" class="btn btn-default">button three</button>
<button type="button" class="btn btn-default">button four</button>
<button type="button" class="btn btn-default">button five</button>
<button type="button" class="btn btn-default">button six</button>
</div>
</div>
</div>
</div>
Looking at the code above, you can see how it appears :
https://i.sstatic.net/HRYVP.png
However, upon resizing the screen, it looks like this :
https://i.sstatic.net/g19y8.png
My goal is to have the buttons resize or reorganize themselves to function effectively as a toolbar on mobile phones.