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

Question

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

Answer 1

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.