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 ?
- Vue JS Axios Download File Example
- Laravel Bootstrap Wysihtml5 Editor Example
- How to Install And Use JQuery In Angular 10 Project?
- Angular 9 Material Textarea Tutorial | Angular Mat Textarea
- Group By Query in Laravel Eloquent Example
- Angular 9 Datatables Ajax Example Tutorial
- JQuery Count Child Elements in Div with Class Example
- Laravel 8 Livewire Image Upload Example
- Laravel Livewire Multi Step Form Example
- MySQL - select first word from string using SUBSTR
- Angular 11 Forms Validation Example
- PHP Laravel select with join subquery example
Blog Search
New Articles
- Angular 11 Image Upload with Preview Example
- Angular 11 File Upload with Web api
- Angular 11 HttpClient Request Example
- Laravel Livewire Multi Step Form Example
- Angular 11 CRUD with Bootstrap & Rest API
- Laravel get all dates between two dates using Carbon
- How to install material design in Angular 11?
- How to get yesterday date in Laravel?
Random Articles
- How to remove file extensions from URL using htaccess?
- Angular Google Maps Add Marker on Click Example
- PHP Check If String Contains HTML Tags Example
- Laravel Set Dynamic Task Scheduling Tutorial
- Allow only Numbers in Input Field React JS Example
- Laravel 5 CRUD Generator Example
- Laravel 8 Spatie Roles and Permissions Tutorial
- Angular 9 Material Text Box Example | mat-input in Angular
- How to Use Datepicker in Angular 10?
- Jquery input allow only numbers and decimal
- Jquery Get Last Element of Array Example
- How to Clear Cache in Laravel 8?