How Does Bootstrap Switch from One Class to The Next

How does Bootstrap switch from one class to the next?

It's managed by CSS.

The CSS rules are written in a specific order, and it's this order which make Bootstrap "mobile first". You'll apply, in the right order :

• col-xs-n
• col-sm-n
• col-md-n
• col-lg-n

Example for <div class="col-xs-1 col-sm-1 col-md-6 col-lg-11"></div> :

...
.col-xs-1 {}
...
@media (min-width: 768px) {
  ...
  .col-sm-1 {}
  ...
}
@media (min-width: 992px) {
  ...
  .col-md-6 {}
  ...
}
@media (min-width: 1200px) {
  ...
  .col-lg-11 {}
  ...
}

1. You'll first have col-xs-1 rules applied.
2. If your screen has a width >= 768px, then you apply col-sm-1 rules. As the same element have both classes, col-sm-1 will override col-xs-1 (the last rule written always gain the upper hand).
3. If your screen has a width >= 992px, then you apply col-md-6 rules, which will override col-sm-1.
4. If your screen has a width >= 1200px, then you apply col-md-11 rules, which will override col-md-6.

Bootstrap Switch Change Class to State

I think CSS is the right way to go with what you are trying to achieve,
all you need to do is enclose your switch inside a parent div and then write some CSS

.parent-div .boostrap-switch-on{  //enter styles for the ON state  }.parent-div .boostrap-switch-off{  //enter styles for the OFF state  }

Bootstrap Switch - How can i change a div`s style depending on the toggle`s state?

this is a simple DEMO you can try.

add data-id to radio buttons like:

<input type="radio" name="exampleToggle" id="toggleOption1"  data-id="#option1"...../>
<input type="radio" name="exampleToggle" id="toggleOption2"  data-id="#option2"...../>

and

$("[name='exampleToggle']").bootstrapSwitch({
    onSwitchChange: function(event, state){
        var id = $(this).data('id');
       $(id + ', .selectedbox').toggleClass('box selectedbox');

    }
});

How to style switch for different classes in Bootstrap 4

As the question says, I need classes like *-sm, *-md, *-lg, *-xl for the bootstrap switch because of I want to increase the size of switch and finally, I made it with the SCSS.

Here I made all resolutions switch with one @mixin ( @mixin is very similar to JS functions but it does not return anything ).

---

For Bootstrap 4

custom-switch-sm, custom-switch-md, custom-switch-lg, custom-switch-xl

SCSS: https://codepen.io/nisharg/pen/VwLbYvv

CSS: https://codepen.io/nisharg/pen/mdJmywW

LIVE SNIPPET (CSS)

/* for sm */

.custom-switch.custom-switch-sm .custom-control-label {
    padding-left: 1rem;
    padding-bottom: 1rem;
}

.custom-switch.custom-switch-sm .custom-control-label::before {
    height: 1rem;
    width: calc(1rem + 0.75rem);
    border-radius: 2rem;
}

.custom-switch.custom-switch-sm .custom-control-label::after {
    width: calc(1rem - 4px);
    height: calc(1rem - 4px);
    border-radius: calc(1rem - (1rem / 2));
}

.custom-switch.custom-switch-sm .custom-control-input:checked ~ .custom-control-label::after {
    transform: translateX(calc(1rem - 0.25rem));
}

/* for md */

.custom-switch.custom-switch-md .custom-control-label {
    padding-left: 2rem;
    padding-bottom: 1.5rem;
}

.custom-switch.custom-switch-md .custom-control-label::before {
    height: 1.5rem;
    width: calc(2rem + 0.75rem);
    border-radius: 3rem;
}

.custom-switch.custom-switch-md .custom-control-label::after {
    width: calc(1.5rem - 4px);
    height: calc(1.5rem - 4px);
    border-radius: calc(2rem - (1.5rem / 2));
}

.custom-switch.custom-switch-md .custom-control-input:checked ~ .custom-control-label::after {
    transform: translateX(calc(1.5rem - 0.25rem));
}

/* for lg */

.custom-switch.custom-switch-lg .custom-control-label {
    padding-left: 3rem;
    padding-bottom: 2rem;
}

.custom-switch.custom-switch-lg .custom-control-label::before {
    height: 2rem;
    width: calc(3rem + 0.75rem);
    border-radius: 4rem;
}

.custom-switch.custom-switch-lg .custom-control-label::after {
    width: calc(2rem - 4px);
    height: calc(2rem - 4px);
    border-radius: calc(3rem - (2rem / 2));
}

.custom-switch.custom-switch-lg .custom-control-input:checked ~ .custom-control-label::after {
    transform: translateX(calc(2rem - 0.25rem));
}

/* for xl */

.custom-switch.custom-switch-xl .custom-control-label {
    padding-left: 4rem;
    padding-bottom: 2.5rem;
}

.custom-switch.custom-switch-xl .custom-control-label::before {
    height: 2.5rem;
    width: calc(4rem + 0.75rem);
    border-radius: 5rem;
}

.custom-switch.custom-switch-xl .custom-control-label::after {
    width: calc(2.5rem - 4px);
    height: calc(2.5rem - 4px);
    border-radius: calc(4rem - (2.5rem / 2));
}

.custom-switch.custom-switch-xl .custom-control-input:checked ~ .custom-control-label::after {
    transform: translateX(calc(2.5rem - 0.25rem));
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<div class="custom-control custom-switch custom-switch-sm">
  <input type="checkbox" class="custom-control-input" id="customSwitch1">
  <label class="custom-control-label" for="customSwitch1">Default Unchcked Switch</label>
</div>

<div class="custom-control custom-switch custom-switch-sm">
  <input type="checkbox" class="custom-control-input" id="customSwitch2" checked>
  <label class="custom-control-label" for="customSwitch2">Default Checked Switch</label>
</div>

<div class="custom-control custom-switch custom-switch-md">
  <input type="checkbox" class="custom-control-input" id="customSwitch3">
  <label class="custom-control-label" for="customSwitch3">Default Unchcked Switch</label>
</div>

<div class="custom-control custom-switch custom-switch-md">
  <input type="checkbox" class="custom-control-input" id="customSwitch4" checked>
  <label class="custom-control-label" for="customSwitch4">Default Checked Switch</label>
</div>

<div class="custom-control custom-switch custom-switch-lg">
  <input type="checkbox" class="custom-control-input" id="customSwitch5">
  <label class="custom-control-label" for="customSwitch5">Default Unchcked Switch</label>
</div>

<div class="custom-control custom-switch custom-switch-lg">
  <input type="checkbox" class="custom-control-input" id="customSwitch6" checked>
  <label class="custom-control-label" for="customSwitch6">Default Checked Switch</label>
</div>

<div class="custom-control custom-switch custom-switch-xl">
  <input type="checkbox" class="custom-control-input" id="customSwitch7">
  <label class="custom-control-label" for="customSwitch7">Default Unchcked Switch</label>
</div>

<div class="custom-control custom-switch custom-switch-xl">
  <input type="checkbox" class="custom-control-input" id="customSwitch8" checked>
  <label class="custom-control-label" for="customSwitch8">Default Checked Switch</label>
</div>

can two bootstrap icon class name work next to each other (class name priority)?

if you can use jQuery, you can toggle the classes separately - see JQUERY demo below

$(function() {
  $(".bi").on('click', function() {
    $(this).toggleClass("bi-clipboard-check");
    $(this).toggleClass("bi-clipboard");

    console.log($(this).prop('classList').value);
  });
});

.bi {
  height: 100px;
  width: 100px;
  display: inline-block;
  background-color: green;
  border: 1px solid red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<i class="bi bi-clipboard"></i>

Bootstrap Toggle - One is on, the other is off

Try this snippet,

$("#toggle1").change(function() {  if ($(this).is(":checked")) {      $("#toggle2").bootstrapToggle('off');  }});$("#toggle2").change(function() {  if ($(this).is(":checked")) {      $("#toggle1").bootstrapToggle('off');  }});

<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet"/><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/><script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<input type="checkbox" data-toggle="toggle" data-style="ios" data-size="normal" data-on="​" data-off="​" class="switch switch-on toggle" checked value="true" id="toggle1"><input type="checkbox" data-toggle="toggle" data-style="ios" data-size="normal" data-on="​" data-off="​" class="switch switch-off toggle" id="toggle2">

Bootstrap Toggle: One on the rest off

Try this,

$(".toggle").change(function() {
 if ($(this).is(":checked")) {
  $('[id^="toggle"]').not(this).each(function() {
   $(this).bootstrapToggle('off');
  });
 }
});

What I am trying to do is, except current element, I am making off to all other elements.

Here is jsfiddle link

---

Related Topics