I’m new to this. I’m trying the Bootstrap-select but I’m not getting the desired effect like here https://developer.snapappointments.com/bootstrap-select/. I have downloaded the files and pointed to the CSS and JS in the head. I have enabled Bootstrap-select via JavaScript in the head as well and still not working – I’m just getting the default appearance. Here is my complete code. What am I doing wrong here? Any tips will be appreciated.
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Untitled 1</title>
<link href="bootstrap-master/docs/assets/css/bootstrap.css" rel="stylesheet" />
<link href="bootstrap-master/docs/assets/css/bootstrap-select.css" rel="stylesheet" />
<script src="bootstrap-master/docs/assets/js/bootstrap-select.js" type="text/javascript"></script>
<script>
$('.selectpicker').selectpicker({
style: 'btn-info',
size: 4
});
</script>
</head>
<body>
<select class="selectpicker">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
</body>
</html>
$(document).ready(function() {
$('.selectpicker').selectpicker({
style: 'btn-info',
size: 4
});
});
Your script is declared and therefore executed before the <select class="selectpicker">
-declaration, causing bootstrap-select never being initialized opon .selectpicker
(selectpicker doesnt exists when the script is runned). So put it in a document(ready)
or after the HTML.
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