I'm struggling to set my checkboxes in the below form into 3 evenly spaced columns and centered perfectly within the form. It currently looks as below.............................................
But, I want it to look like.........................................
Please help!!!!!!!!!!!!!!!!!!!!!! :)
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">
<label class="form-check-label">
<input class="form-check-input mr-2" type="checkbox" value="">
Option 2
</label>
</div>
<div class="form-inline">
<label class="form-check-label">
<input class="form-check-input mr-2" type="checkbox" value="">
Option 3
</label>
</div>
<div class="form-inline">
<label class="form-check-label">
<input class="form-check-input mr-2" type="checkbox" value="">
Option 4
</label>
</div>
<div class="form-inline">
<label class="form-check-label">
<input class="form-check-input mr-2" type="checkbox" value="">
Option 5
</label>
</div>
<div class="form-inline">
<label class="form-check-label">
<input class="form-check-input mr-2" type="checkbox" value="">
Option 6
</label>
</div>
<div class="form-inline">
<label class="form-check-label">
<input class="form-check-input mr-2" type="checkbox" value="">
Option 7
</label>
</div>
<div class="form-inline">
<label class="form-check-label">
<input class="form-check-input mr-2" type="checkbox" value="">
Option 8
</label>
</div>
<div class="form-inline">
<label class="form-check-label">
<input class="form-check-input mr-2" type="checkbox" value="">
Option 9
</label>
</div>
</fieldset>
<button type="submit" class="btn btn-primary">Do it!</button>
</form>
Aucun commentaire:
Enregistrer un commentaire