Bootstrap select picker style not working
Question
With my code below, I am trying to style my bootstrapped select picker with the "btn-warning style" as seen here: https://silviomoreto.github.io/bootstrap-select/
Here what my code looks like:
<head> <title>Title</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="drake.css"/> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css"> <link rel="stylesheet" type="text/css" media="screen" href="http://silviomoreto.github.io/bootstrap-select/stylesheets/bootstrap-select.css"> </head> <body> <div id="course2"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script> <script src="http://silviomoreto.github.io/bootstrap-select/javascripts/bootstrap-select.js"></script> <select class="selectpicker" data-style="btn-primary" data-width="500px"> <option>Mustard</option> <option>Ketchup</option> <option>Relish</option> </select> <script type="text/javascript"> $(document).ready(function() { $('.selectpicker').selectpicker(); }); </script> </div> </body>
As you can see, the select picker is not taking on the style or width attributes. What am I doing wrong? Thanks so much!
1 answers
solution1
4 ACCPTED 2015-11-10 04:06:43
Fixed the URLs for you.
Notice I've moved the javascript files just before the closing tag </body> for faster page loading, and keep the css files at the <head> .
The problem was that you were using the incorrect url for bootstrap-select libraries. You can easily address those errors by using browser's developer tools, and then... well.. do some magic . :D
<head> <title>Title</title> <meta charset="utf-8"> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css"> <link rel="stylesheet" type="text/css" media="screen" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.5/css/bootstrap-select.min.css"> </head> <body> <div id="course2"> <select class="selectpicker" data-style="btn-primary" data-width="500px"> <option>Mustard</option> <option>Ketchup</option> <option>Relish</option> </select> </div> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.5/js/bootstrap-select.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $('.selectpicker').selectpicker(); }); </script> </body>
EDIT: Also, why are you linking two bootstrap versions? 3.3.5 css and 2.3.1 js/css? You should use the latest only... try it
<head> <title>Title</title> <meta charset="utf-8"> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" media="screen" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.5/css/bootstrap-select.min.css"> </head> <body> <div id="course2"> <select class="selectpicker" data-style="btn-primary" data-width="500px"> <option>Mustard</option> <option>Ketchup</option> <option>Relish</option> </select> </div> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.5/js/bootstrap-select.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $('.selectpicker').selectpicker(); }); </script> </body>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.