Bootstrap switch toggle example from scratch
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.
May 3, 2017 | Category : BootstrapJQueryJQuery Plugin
Do you like bellow Tutorials ?
- How to Open URL in New Tab using Jquery?
- Codeigniter Curl Post Request Tutorial
- How to create email notification in Laravel 7.x and 6.x?
- Laravel 5 Passport - Key path oauth-public.key does not exist or is not readable solved.
- AngularJS - Confirm Password Validation Example
- Angular Toastr Notifications Example
- Laravel 7.x and 6.x country list using Countries package
- How to remove key value from javascript object?
- Angular 11 Route and Nested Routing Example
- Laravel 7.x and 6.x Soft Delete Example
- Laravel 5.6 - Generate Free Charts and Graphs Example
- Angular 10 Input Checkbox Reactive Form Example
Blog Search
New Articles
- How to Create Add to Cart Functionality in Laravel?
- Laravel Custom Log File Example
- How to Use Google Charts in Angular?
- Laravel Custom env Variables Example
- How to Create Custom Facade in Laravel?
- Laravel Migration Change Enum Field Value Example
- How to Create Custom Login and Registration Page in Laravel?
- How to Generate Unique Slug in Laravel?
Random Articles
- Laravel Custom env Variables Example
- Multidimensional Array Search By Value in PHP
- How to Use ngx datatable in Angular?
- How to Use Bootstrap Tooltip in React?
- Allow only Numbers in Input Field React JS Example
- How To Update Angular CLI To Latest Version 9
- PHP Laravel 5.6 - Send Email using Mail Example
- How to Send Mail using Mailgun in Laravel 8?
- Angular Add Custom Attribute to Element Example
- Bootstrap 4 Datepicker in Angular 9/8 Example
- How to use Model Events in Laravel?
- How to change log file path in Laravel 7.x and 6.x?