we love to make better layout to give user, if you require switch in bootstrap then you can simply use bootstraptoggle library of jquery. bootstrap toggle provide us good layout and you can apply very simply. In this example you can see how to use and how it easy. Here i we take checkbox with animated layout. You can see design as live bellow:
Layout:
Example:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Toggle Example</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
</head>
<body>
<div class="container">
<h1>Bootstrap Toggle Example</h1>
<strong>Normal Toggle:</strong>
<br/>
<input checked data-toggle="toggle" data-onstyle="warning" type="checkbox">
<br/>
<strong>Toggle with custom text:</strong>
<br/>
<input checked data-toggle="toggle" data-on="Enabled" data-off="Disabled" type="checkbox">
</div>
</body>
</html>
You can get more information about bootstraptoggle plugin from here : Click Here.
Do you like below Tutorials ?
- Angular Json Pipe Example | Json Pipe in Angular 9/8/7
- Angular Slice Pipe Example | Slice Pipe in Angular 9/8/7
- Angular Uppercase Pipe Example | Uppercase Pipe in Angular 9/8/7
- Angular LowerCase Pipe Example | LowerCase Pipe in Angular 9/8/7
- Angular Titlecase Pipe Example | Titlecase Pipe in Angular 9/8/7
- Angular KeyValue Pipe Example | KeyValue Pipe in Angular 9/8/7
- Call Method from One Component to Another Component in Angular
- Angular Push Object into Array Example