"Bootstrap Components"
Bootstrap 4.1.1 Snippet by CreativeTim

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<head>
<script src="https://raw.githack.com/creativetimofficial/now-ui-kit/master/assets/js/plugins/nouislider.min.js"></script>
<script src="https://raw.githack.com/creativetimofficial/now-ui-kit/master/assets/js/plugins/bootstrap-switch.js"></script>
</head>
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700,200" rel="stylesheet">
<div class="section section-basic mt-5" id="basic-elements">
<div class="container">
<div class="row" id="checkRadios">
<div class="col-sm-6 col-lg-3 mb-4">
<p class="category">Checkboxes</p>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox">
<span class="form-check-sign"></span>
Unchecked
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" checked="">
<span class="form-check-sign"></span>
Checked
</label>
</div>
<div class="form-check disabled">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" disabled="">
<span class="form-check-sign"></span>
Disabled Unchecked
</label>
</div>
<div class="form-check disabled">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
@font-face {
font-family: 'Nucleo Outline';
src: url("https://github.com/creativetimofficial/now-ui-kit/blob/master/assets/fonts/nucleo-outline.eot");
src: url("https://github.com/creativetimofficial/now-ui-kit/blob/master/assets/fonts/nucleo-outline.eot") format("embedded-opentype");
src: url("https://raw.githack.com/creativetimofficial/now-ui-kit/master/assets/fonts/nucleo-outline.woff2");
font-weight: normal;
font-style: normal;
}
button,
input {
font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
}
body {
color: #2c2c2c;
font-size: 14px;
font-family: Montserrat,Helvetica Neue,Arial,sans-serif;
overflow-x: hidden;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
.bootstrap-switch {
display: inline-block;
direction: ltr;
cursor: pointer;
border-radius: 30px;
border: 0;
position: relative;
text-align: left;
margin-bottom: 10px;
line-height: 8px;
width: 59px !important;
height: 22px;
outline: none;
z-index: 0;
-webkit-user-select: none;
-moz-user-select: none;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
nowuiKit = {
initSliders: function() {
// Sliders for demo purpose in refine cards section
var slider = document.getElementById('sliderRegular');
noUiSlider.create(slider, {
start: 40,
connect: [true, false],
range: {
min: 0,
max: 100
}
});
var slider2 = document.getElementById('sliderDouble');
noUiSlider.create(slider2, {
start: [20, 60],
connect: true,
range: {
min: 0,
max: 100
}
});
}
}
$(document).ready(function() {
// Activate bootstrapSwitch
$('.bootstrap-switch').each(function() {
$this = $(this);
data_on_label = $this.data('on-label') || '';
data_off_label = $this.data('off-label') || '';
$this.bootstrapSwitch({
onText: data_on_label,
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Material Kit PRO BS3
Clean UI Components

Questions / Comments: