Implement toggle change for theme choices in settings API

I like to work with bootstrap for the forntend a part of my tasks, however this time I must create a theme settings web page to handle the activation of some template components of a {custom} theme. I wish to use a change to allow or disable the options, however I do not know find out how to implement it within the wordpress approach.
Can anybody present me a pattern of the implementation, I used to be considering to make use of bootstrap however it is going to be not a reasonably alternative as a result of wordpress has it is personal css guidelines set to handle the styling of the varied inputs and textual content space on the backend.
Thanks for the assistance.

<?php

class BSSMenu {

  public perform registerSettings()
  {
    add_settings_section(
      'swiper-settings',
      'Swiper slider settings',
      [$this, 'SwiperOptions'],
      $menu_slug
    );

    add_settings_field(
      'swiper-autoload',
      'Auto init slider',
      [$this, 'sliderSettings'],
      $menu_slug,
      'swiper-settings'
    );

    register_setting( 'bs-shortcodes', 'bs-slider' );

  }

  public perform initOptionsMenu()
  {
    extract([
      'page_title' => 'Bootstrap Shortcodes - Settings',
      'menu_title' => 'Bootstrap Shortcodes',
      'capability' => 'manage_options',
      'menu_slug' => 'bs-shortcodes',
      'function' => [$this, 'renderOptionsMenu'],
    ]);
    $hook_suffix = add_options_page( $page_title, $menu_title, $functionality, $menu_slug, $perform );
    //add_action( 'load-'.$hook_suffix, [$this, 'initMenuScripts'] );
  }


  // public perform initMenuScripts()
  // {
  //   wp_enqueue_script('popper-js', PLUGIN_DIR.'/js/popper.min.js', ['jquery'] );
  //   wp_enqueue_script('bootstrap-js', PLUGIN_DIR.'/js/bootstrap.min.js', ['jquery'] );
  //   wp_enqueue_style('bootstrap-css', PLUGIN_DIR.'/css/bootstrap.min.css' );
  // }

  public perform renderOptionsMenu()
  {
    ?>
      <div class="container-fluid">
        <div class="row">
          <div class="col-12">
            <h1>Bootstrap Shortcodes - Swiper settings</h1>
          </div>
          <div class="col-12">
            <kind motion="choices.php" technique="POST">
              <!-- Swiper auto init -->
              <?php
                settings_fields('bs-shortcodes');
                do_settings_sections('bs-shortcodes');
                $choices = get_option('bs-shortcodes');
              ?>
                <div class="custom-control custom-switch">
                  <enter sort="checkbox" class="custom-control-input" identify="bs-slider" id="customSwitch1" worth="0" <?php checked($choices['bs-slider'], 1); ?>/>
                  <label class="custom-control-label" for="customSwitch1">Auto init swiper</label>
                </div>

              <?php
                submit_button();
              ?>
            </kind>
          </div>
        </div>
      </div>
    <?php
  }

  // public perform sliderSettings()
  // {
  //   echo '
  //   <div class="custom-control custom-switch">
  //     <enter sort="checkbox" class="custom-control-input" identify="bs-slider" id="customSwitch1" worth="'. get_option('bs-slider') .'">
  //     <label class="custom-control-label" for="customSwitch1">Auto init swiper</label>
  //   </div>
  //   ';
  // }

}
?>

NB: I am nonetheless doing apply with the settings API, this as a result of I had some obscure how appropriately add sections and fields, I am sorry if there are errors in my code! It use bootstrap 4 however I’ll rework the code to replicate the default wordpress css backend lessons.