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 ?
- Laravel 7.x and 6.x Get Route Name in Controller, View and Middleware
- Jquery Ajax Post Request in Laravel 7.x and 6.x
- How to Create Custom 404 Error Page in Laravel 7?
- Javascript Convert Object to String Example
- How to Add Email Validation in React JS?
- Angular Titlecase Pipe Example | Titlecase Pipe in Angular 9/8/7
- Reactive Form Validation in Angular 10 Example
- Laravel timepicker example using bootstrap datetimepicker plugin
- Laravel Select Query if Condition Example | Laravel Sql Case When
- Laravel - Drop column if exists using migration
- Laravel 7.x and 6.x Chart example using Charts Package
- Laravel Collection Get First Item Example
Blog Search
New Articles
- How to Generate Component in Angular 10?
- Laravel Migration Create Mysql View Example
- Angular 10 Install Bootstrap 4 Example
- How to install Angular 10 and Create Angular 10 Project?
- Reactive Form Validation in Angular 10 Example
- How to Update Angular Version 9 to 10?
- Laravel Set Dynamic Task Scheduling Tutorial
- How to Rename File Name in PHP?
Random Articles
- PHP Dropzone Allow only Images to Upload Example
- Print Iframe Content using JQuery Example
- Angular Radio Button Change Event Example
- Laravel 7.x and 6.x Passing Variable to Javascript Example
- Angular 9/8/7 NgStyle Directive Example
- Laravel 7.x and 6.x check file exists in folder example
- Change Date Format in Laravel Example
- Laravel - How to handle "No query results for model" Error
- How to use multiple where condition in Codeigniter?
- JQuery Ajax Post Request Example in Laravel 5.7
- Laravel Select Query if Condition Example | Laravel Sql Case When
- PHP Laravel 7.x and 6.x Rating System Example from Scratch