mercredi 7 octobre 2020

Bootstrap put checkboxes into 3 evenly spaced columns and centered within form

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.............................................

enter image description here

But, I want it to look like.........................................

enter image description here

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