Get 2024 Templates Mega Bundle!14 Bootstrap, Vue & React Templates + 3 Vector Sets
Get for 99$
Inline checkboxes/radios - Responsive behavior - NO WRAP when the width is not enough big
Hi,
You do not mention inline checkboxes/radios in the documentation
https://preview.keenthemes.com/html/metronic/docs/base/forms/checks-radios
Actually, you do it in your demo in which you use d-flex class for the container and you handle margin by manual with me-* class.
https://preview.keenthemes.com/metronic8/demo1/apps/projects/settings.html
Well, I follow that way. However, I realize that it is NOT RESPONSIVE when the screen changes to mobile view. Here is my code
<div class="d-flex">
<div class="form-check form-check-custom form-check-solid me-5">
<input type="checkbox" class="form-check-input" name="ByWeekDay" value="0">
<label class="form-check-label">Mon</label>
</div>
<div class="form-check form-check-custom form-check-solid me-5">
<input type="checkbox" class="form-check-input" name="ByWeekDay" value="1">
<label class="form-check-label">Tue</label>
</div>
<div class="form-check form-check-custom form-check-solid me-5">
<input type="checkbox" class="form-check-input" name="ByWeekDay" value="2">
<label class="form-check-label">Wed</label>
</div>
<div class="form-check form-check-custom form-check-solid me-5">
<input type="checkbox" class="form-check-input" name="ByWeekDay" value="3">
<label class="form-check-label">Thu</label>
</div>
<div class="form-check form-check-custom form-check-solid me-5">
<input type="checkbox" class="form-check-input" name="ByWeekDay" value="4">
<label class="form-check-label">Fri</label>
</div>
<div class="form-check form-check-custom form-check-solid me-5">
<input type="checkbox" class="form-check-input" name="ByWeekDay" value="5">
<label class="form-check-label">Sat</label>
</div>
<div class="form-check form-check-custom form-check-solid">
<input type="checkbox" class="form-check-input" name="ByWeekDay" value="6">
<label class="form-check-label">Sun</label>
</div>
</div>In fact, I tried to fix by
flex-wrap class in the container, but it means I have to handle the margin (top/bottom) in mobile view by manual.Did I apply correctly? Why do not we use
form-check-inline supported by Bootstrap? Could you recommend me the right way to fix?Thanks.
Replies (1)
Hi,
Please try to use gap-* with flex-wrap to make it fully responsive:
<div class="d-flex flex-wrap gap-5">
...
</div>Regards.
