CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
Philip McQuitty
Philip McQuitty

Reputation: 1077

Bootstrap select picker style not working

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!

Upvotes: 1

Views: 24813

Answers (1)

Frondor
Frondor

Reputation: 3466

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>

Upvotes: 5

Related Questions