Form Layouts - Toggle and Switch Forms

                  
                    <form>
                      <!-- My Network -->
                      <div class="mb-7">
                        <!-- Title -->
                        <div class="row justify-content-between align-items-end">
                          <div class="col-6">
                            <h2 class="h5 mb-0">My network</h2>
                          </div>
                          <div class="col-6 text-right">
                            <a id="toggleAll1" class="js-toggle-state link-muted" href="javascript:;"
                               data-target="#customSwitch1, #customSwitch2, #customSwitch3, #customSwitch4">
                              <span class="link-muted__toggle-default">Toggle all</span>
                              <span class="link-muted__toggle-toggled">Untoggle all</span>
                            </a>
                          </div>
                        </div>
                        <!-- End Title -->

                        <hr class="mt-2 mb-4">

                        <div class="mb-3">
                          <h3 class="small text-muted">Send me:</h3>
                        </div>

                        <!-- Checkbox Switch -->
                        <div class="custom-control custom-switch">
                          <input type="checkbox" class="custom-control-input" id="customSwitch1">
                          <label class="custom-control-label" for="customSwitch1">
                            <span class="d-block">New for you</span>
                            <small class="d-block text-muted">A weekly email featuring shots from designers you follow</small>
                          </label>
                        </div>
                        <!-- End Checkbox Switch -->

                        <hr class="my-3">

                        <!-- Checkbox Switch -->
                        <div class="custom-control custom-switch">
                          <input type="checkbox" class="custom-control-input" id="customSwitch2" checked>
                          <label class="custom-control-label" for="customSwitch2">
                            <span class="d-block">Account activity <span class="badge badge-success ml-1">New</span></span>
                            <small class="d-block text-muted">Get important notifications about you or activity you've missed</small>
                          </label>
                        </div>
                        <!-- End Checkbox Switch -->

                        <hr class="my-3">

                        <!-- Checkbox Switch -->
                        <div class="custom-control custom-switch">
                          <input type="checkbox" class="custom-control-input" id="customSwitch3">
                          <label class="custom-control-label" for="customSwitch3">
                            <span class="d-block">Meetups near you <span class="badge badge-success ml-1">New</span></span>
                            <small class="d-block text-muted">Get an email when a Dribbble Meetup is posted close to my location</small>
                          </label>
                        </div>
                        <!-- End Checkbox Switch -->

                        <hr class="my-3">

                        <!-- Checkbox Switch -->
                        <div class="custom-control custom-switch">
                          <input type="checkbox" class="custom-control-input" id="customSwitch4" checked>
                          <label class="custom-control-label" for="customSwitch4">
                            <span class="d-block">Opportunities</span>
                            <small class="d-block text-muted">Get a daily email when new design jobs are posted in your area</small>
                          </label>
                        </div>
                        <!-- End Checkbox Switch -->
                      </div>
                      <!-- End My Network -->

                      <button type="submit" class="btn btn-sm btn-primary btn-wide transition-3d-hover">Update Email Notifications</button>
                    </form>
                  
                

                  
                    <!-- JS Front -->
                    <script src="../../assets/js/components/hs.toggle-state.js"></script>

                    <!-- JS Plugins Init. -->
                    <script>
                      $(document).on('ready', function () {
                        // initialization of toggle state
                        $.HSCore.components.HSToggleState.init('.js-toggle-state');
                      });
                    </script>