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 ?
- PHP Laravel select with join subquery example
- Laravel 5.6 - Excel and csv import export using maatwebsite example
- Laravel redirect route with query string example
- Laravel 5.7 get ip address
- Laravel check if ajax request or not example
- Laravel db raw with sum of column example
- Codeigniter 3 undefined property $db in model - Fix
- Creating Reusable Components in Angular 8
Blog Search
New Articles
Random Articles
- How to access attributes value as params in x-editable?
- Laravel login registration tutorial example using auth scaffold
- AngularJS Form Validation using ngMessages Example
- Laravel - Where null and Where not null eloquent query example
- Laravel 5.5 get last query log example
- MySQL - select first word from string using SUBSTR
- PHP Laravel select with join subquery example
- JQuery Ajax Post Request Example in Laravel 5.7