Having trouble organizing my checkboxes into 3 columns and centering them within the form perfectly. Current layout:
Desired look:
HTML:
`
<form action="/signup" method="POST">
<div class="form-group">
<input
type="text"
name="firstName"
id="first-name"
class="form-control"
placeholder="First Name"
/>
</div>
<div class="form-group">
<input
type="text"
name="surname"
id="surname"
class="form-control"
placeholder="Surname"
/>
</div>
<div class="form-group">
<input
type="email"
name="email"
id="email"
class="form-control"
placeholder="Email"
/>
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<fieldset class="form-group">
<legend>Pick your favourite 3 things</legend>
<div class="form-inline">
<label class="form-check-label">
<input class="form-check-input mr-2" type="checkbox" value="">
Option 1
</label>
</div>
<div class="form-inline">
[...]
</div>
<div class="form-inline">
[...]
</div>
[...]
</div>
</fieldset>
<button type="submit" class="btn btn-primary">Do it!</button>
</form>