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!

Not sure exactly what the problem is but you should move all script tags directly before the closing body tag — jfoutch, Nov 10 '15 at 04:03

Frondor · Accepted Answer · 2017-02-25T15:35:04.837

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>

Thanks!! Do you know if this will work if I open my .html file in a browser? I opened my new .html file in Chrome and the bootstrap styles do not seem to be activated. — Philip McQuitty, Nov 10 '15 at 04:13
Have you tried with my example? Well... It's just HTML/CSS... It's intended to be running on browsers. Why don't you try servers like wamp and xamp to run your websites? — Frondor, Nov 10 '15 at 04:16
I have used your direct code and the style is still not showing up for me. Do I need to download the bootstrap package and put it in my local folder, or is the linked url good enough? — Philip McQuitty, Nov 10 '15 at 04:22
Yes, it will be easier if you download them and put them in folders. That wouldn't be a problem if you are using some server environment in your machine, but if you are directly opening the html files on your browser, then using local copies of those libraries would fix the problem. like `` — Frondor, Nov 10 '15 at 04:28
I've made an example for you, download this, unzip it and open `index.html` http://ge.tt/2nodPWR2/v/0?c it may appear as a malicious file but don't worry, that's because of the host I'm using to share it with you. — Frondor, Nov 10 '15 at 04:35
Wow thank you so much, this worked like a charm. Stackoverflow needs more users like you. Learned so much. — Philip McQuitty, Nov 10 '15 at 04:39

Bootstrap select picker style not working

1 Answers1

Linked