I am working on a project that utilizes Bootstrap 4. Within one of the forms, I have checkboxes representing each state in the U.S. along with a few territories. Currently, these checkboxes are displayed inline, which is good for utilizing available width on larger screens. However, all the states appear on the same line as if they were just words like this:
☐ Alabama ☐ Alaska ☐ Arizona ☐ Arkansas ☐ California
☐ Colorado ☐ Connecticut etc etc
My goal is to display each subsequent checkbox on a new line but wrap them into columns to make use of the available space on larger screens. For example, on a phone screen, there might be only one state per line, while on a large screen, multiple columns would be visible like this:
☐Alabama ☐Maryland ☐Rhode Island
☐Alaska ☐Massachusetts ☐South Carolina
☐Arizona ☐Michigan ☐South Dakota
☐Arkansas ☐Minnesota ☐Tennessee
☐California ☐Mississippi ☐Texas
☐Colorado ☐Missouri ☐Utah
☐Connecticut ☐Montana ☐Vermont
☐Delaware ☐Nebraska ☐Virginia
☐Florida ☐Nevada ☐Washington
Here's an excerpt from my current HTML markup:
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="card">
<div class="card-body">
<h3 class="card-title">State:</h3>
<div class="card-text">
<div class="form-check form-check-inline">
<label>
<input type="checkbox" name="state_nopref" value="state_nopref" onclick="uncheck_all_state(this)" checked>No Preference
</label>
</div><!-- end checkbox -->
<div class="form-check form-check-inline">
<label>
<input name="state[]" type="checkbox" value="AL" onclick="uncheck_state_nopref(this)" >Alabama
</label>
</div>
<!-- Continued code blocks... -->
</div><!-- end card-text -->
</div>
</div><!-- end card -->
</div><!-- end column -->
</div><!-- end row -->
</div>
Is there an easy way to modify my layout so it can take advantage of wider screens by displaying content in additional columns?