CODEWITHSUNDEEP
bootstrap-4
Santhosh
Santhosh

Reputation: 11788

html: how to create a toggle switch.I am using bootstrap4

I want to create a toggle switch in my page.

I am using bootstrap4.

I could not find relevant solution.

Something i am looking like: https://www.w3schools.com/howto/howto_css_switch.asp

Can anyone guide me

Upvotes: 3

Views: 16245

Answers (2)

Elyas 'Eloy' Hadizadeh Tasbiti
Elyas 'Eloy' Hadizadeh Tasbiti

Reputation: 3665

In Bootstrap 5.2.3 you can use https://getbootstrap.com/docs/5.2/forms/checks-radios/#switches

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckChecked" checked>
  <label class="form-check-label" for="flexSwitchCheckChecked">Checked switch checkbox input</label>
</div>

In Bootstrap 4.5 you can find a toggle switch.

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" id="customSwitch1">
  <label class="custom-control-label" for="customSwitch1">Toggle this switch element</label>
</div>
<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" disabled id="customSwitch2">
  <label class="custom-control-label" for="customSwitch2">Disabled switch element</label>
</div>

Upvotes: 9

hannn1
hannn1

Reputation: 69

As i know there is no switch button in bootstrap 4 documentation and looks like they have not did this yet but hopefully they will have this in the future. But github have made their own switch button with bootstrap and you can get it here.

You can use include it in your project with cdn or download it with npm / yarn.

<link href="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4- [email protected]/css/bootstrap4-toggle.min.css" rel="stylesheet">

<script src="https://cdn.jsdelivr.net/gh/gitbrent/[email protected]/js/bootstrap4-toggle.min.js"></script>

if with npm

npm install bootstrap4-toggle

Yarn

yarn add bootstrap4-toggle

and you are all set and ready to use it!

Demo

<input type="checkbox" checked data-toggle="toggle" data-size="lg">

Hope it help ya! Please let me know if it can work or not ya. I am also trying to find a solution for this also.

Upvotes: 0

Related Questions