<div class="container my-4">

​

    <p class="font-weight-bold">Bootstrap switch/toggle is a simple component used for activating one of two predefined options. Commonly used as an on/off button.</p>

​

    <p><strong>Detailed documentation and more examples you can find in our <a href="https://mdbootstrap.com/docs/jquery/forms/switch/"

          target="_blank">Bootstrap Toggle Docs</a> </p>

​

    <hr>

​

    <p class="font-weight-bold">Basic examples</p>

      <div class="row">

​

      <!-- Grid column -->

      <div class="col-md-6 mb-4 mb-md-0">

        <!-- Title -->

        <h2 class="mb-3">

          Default switch

        </h2>

        <!-- Description -->

        <p>A switch has the markup of a custom checkbox but uses the <code>.custom-switch</code> class to render a toggle

          switch.

          Switches also support the <code>disabled</code> attribute.</p>

        <!-- Section: Live preview -->

        <section class="section-preview">

          <div class="custom-control custom-switch">

            <input type="checkbox" class="custom-control-input" id="customSwitches">

            <label class="custom-control-label" for="customSwitches">Toggle this switch element</label>

          </div>

          <div class="custom-control custom-switch">

            <input type="checkbox" class="custom-control-input" id="customSwitches1" checked="">

            <label class="custom-control-label" for="customSwitches1">Toggle this switch element</label>

          </div>

        </section>

        <!-- Section: Live preview -->

      </div>

      <!-- Grid column -->

      <!-- Grid column -->

      <div class="col-md-6 mb-4 mb-md-0">

        <!-- Title -->

        <h2 class="">

          Material switch

          <a href="https://mdbootstrap.com/products/jquery-ui-kit/" target="_blank" class="btn btn-danger btn-sm waves-effect waves-light" role="button">MDB

            Pro component

            <i class="far fa-gem ml-1"></i>

          </a>

        </h2>

        <!-- Description -->

        <p>Material Design styling for the Bootstrap Switch component</p>

        <!-- Section: Live preview -->

        <section class="section-preview">

          <!-- Disabled Switch -->

          <div class="switch">

            <label>

              Off

              <input type="checkbox">

              <span class="lever"></span> On

            </label>

          </div>

          <!-- Switch -->

          <div class="switch">

            <label>

              Off

              <input type="checkbox" checked="checked">

              <span class="lever"></span> On

            </label>

          </div>

        </section>

        <!-- Section: Live preview -->

      </div>

      <!-- Grid column -->

    </div>

​

  </div>

​

​