Bootstrap 4 Advanced Components : Bootstrap switch

Bootstrap 4 Advanced Components : Bootstrap switch for Bootstrap 4

by knokit

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/djibe/bootstrap-switch@6a41c824782c514fd5e09b6683f852a9c9b2a997/dist/css/bootstrap4/bootstrap-switch.min.css">
<link rel="stylesheet" href="https://daemonite.github.io/material/css/material.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
<script src="https://daemonite.github.io/material/js/material.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/djibe/bootstrap-switch/dist/js/bootstrap-switch.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="container">
  <div class="row">
    <div class="col">
      <div class="jumbotron my-4">
        <h1>Bootstrap switch (by Emanuele LostCrew) for Bootstrap 4 Advanced Components</h1>
        <p class="lead">by djibe.</p>
        <blockquote class="blockquote">
          <p>
            Turn checkboxes and radio buttons into toggle switches, now with Bootstrap 4.3.1 compatibility.
          </p>
        </blockquote>

        <h2>Setup</h2>
        <ol>
          <li>Add the CSS and JS from <a href="https://github.com/djibe/bootstrap-switch" target="_blank">my Bootstrap Switch fork</a> to your HTML header. Choose the Bootstrap 4 version.</li>
          <li>Add tag : <code>data-toggle="switch"</code> to the desired input (type=checkbox or radio).<br>
            <code>&lt;input type="checkbox" name="my-checkbox" checked></code></li>
          <li>Add my custom CSS for universal bootstrap theming.</li>
          <li>Then initialize the plugin in your js code with <code>$('[data-toggle="switch"]').bootstrapSwitch();</code></li>
          <li>More options : state, size, animate, disabled, readonly, indeterminate, inverse, onColor, offColor, onText, offText,...

CSS

/* Use SCSS file from the repo to recompile with your theme or copy those lines to adjust theme */

.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary {
  color: #fff;
  background: var(--primary);
}

.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-info,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-info {
  background: var(--info);
  color: #fff;
}

.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-success {
  background: var(--success);
  color: #fff;
}

.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-warning,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-warning {
  background: var(--warning);
  color: #fff;
}

.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-danger,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-danger {
  background: var(--danger);
  color: #fff;
}

.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-secondary,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-secondary {
  background: var(--secondary);
  color: #fff;
}

JavaScript

// Just initialize the plugin with 
$('[data-toggle="switch"]').bootstrapSwitch();