Menu
I'm trying to use bootstrap switch and I'm facing some problems. I'm using this examples here http://www.jque.re/plugins/version3/bootstrap.switch/ and whatever classes i'm using, the buttons stays with the same style and with very small size that I can't even see the ON and OFF text. I really don't know what I'm doing wrong. Any help? thanks
here's my html:
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="css/jquery-ui-1.10.1.custom.css" />
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-switch.css" rel="stylesheet">
<link href="css/_custom.css" rel="stylesheet">
<script src="js/jquery-1.9.1.js" type="text/javascript"></script>
<script src="js/jquery-ui.js" type="text/javascript"></script>
<script src="js/bootstrap-switch.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="row">
<div class="col-lg-12">
<div class="make-switch switch-large">
<input type="checkbox" name="my-checkbox" checked>
<div class="make-switch" data-on="primary" data-off="info">
<input type="checkbox" checked name="my-checkbox">
<div id="label-switch" class="make-switch" data-on-label="SIM" data-off-label="NÃO">
<input type="checkbox" checked name="my-checkbox">
</div>
</div>
</div>
</div></div>
</form>
</div>
<script type="text/javascript">
$("[name='my-checkbox']").bootstrapSwitch();
</script>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
802
asked Jul 10 '26 21:07
You dependencies are out of order; they should be like this.
Header
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.2/css/bootstrap3/bootstrap-switch.min.css" rel="stylesheet" />
<link href="path/custom.css" rel="stylesheet" type="text/css"/>
End of body
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.2/js/bootstrap-switch.min.js"></script>
<script>$("[name='my-checkbox']").bootstrapSwitch();</script>
CSS Order
JS Order
You are also loading jQuery twice on the page, (once in your head and once in the end of the body) use it once before all JS dependencies.
The $("[name='my-checkbox']").bootstrapSwitch(); also needs to be placed after all the other JS dependencies in order for it to load.
**Sidenote: You are missing an opening form tag as well.
$("[name='my-checkbox']").bootstrapSwitch();<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.2/css/bootstrap3/bootstrap-switch.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.2/js/bootstrap-switch.min.js"></script>
<hr>
<form>
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="make-switch switch-large">
<input type="checkbox" name="my-checkbox" checked>
<div class="make-switch" data-on="primary" data-off="info">
<input type="checkbox" checked name="my-checkbox">
<div id="label-switch" class="make-switch" data-on-label="SIM" data-off-label="NÃO">
<input type="checkbox" checked name="my-checkbox">
</div>
</div>
</div>
</div>
</div>
</div>
</form>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
