Although there are similar answers available, I want to address those who are trying to prevent their columns from stacking on XS display.
Despite having two columns, the content is still stacking at certain displays. This issue is occurring while using Bootstrap 4.
320 px (XS) display :
https://i.sstatic.net/zp1gg.png
480 px (XS) display, this view appears to be correct:
https://i.sstatic.net/QmhT5.png
800 px (MD) display :
https://i.sstatic.net/43thq.png
There seems to be an issue with the contents stacking. It's quite perplexing.
Code:
<div class="row justify-content-between">
<div class="input-group col-md-4 col-12 text-center">
<div class="input-group-prepend">
<button class="btn btn-primary" type="button">
<!-- Display none in smaller than sm -->
<span class="d-none d-md-block">Export</span>
<!-- Display none in md or larger -->
<i class="material-icons d-md-none">file_download</i>
</button>
</div><select class="custom-select text-center" id="export_type">
<option value="1">
Kml
</option>
<option value="2">
Csv
</option>
</select>
</div>
<div class="col-md-8 col-12 text-center">
<div class="btn btn-outline-primary">
<i class="material-icons">autorenew</i>
</div>
<!-- Bootstrap Multiselect -->
<select id="hidden_fields" multiple="multiple">
</select>
</div>
</div>
In addition, I am utilizing Bootstrap Multiselect but facing issues aligning it properly with the regular Boostrap custom select. Any suggestions on how to resolve this alignment and add extra vertical space between the columns would be greatly appreciated.
Most of my current layout decisions have been based on trial and error. As a beginner in using Bootstrap, I am open to suggestions on improving the button arrangement for better aesthetics.