I am working with a Bootstrap Form that contains checkboxes. One specific scenario involves a large number of options to choose from. Currently, these options are displayed in a single long list, which can make it difficult for users to read and select their preferences easily.
Here is how the form currently appears:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<body>
<main role="main" class="container">
<div>
<form method="get" action="projects.php" role="form">
<input type="hidden" name="action" value="projectsFind">
<div class="form-group row">
<label for="sectionNumber" class="col-sm-2 col-form-label">Section Number</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="sectionNumber" name="sectionNumber" placeholder="Section Number">
</div>
</div>
<div class="form-group row">
<div class="col-sm-2">Selections</div>
<div class="col-sm-10">
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="footTypes[]" id="footTypes" value="Hot Food">
<label class="form-check-label" for="gridCheck1">
Hot Food </label>
</div>
[...]
</div>
</div>
</div>
</form>
As mentioned above, the "Selections" checkboxes are currently presented in a vertical list format. Is there a way to arrange them into aligned columns for improved readability?