0

I've been running into a a few problems getting my twitter bootstrap to work properly on my Django site. Currently my twitter bootstrap partially works.

For example, my HTML file is:

    <!DOCTYPE html>
    {% load staticfiles %}

    <head>

    <link rel="stylesheet" href="{% static "bootstrap/css/bootstrap.min.css" %}" type="text/css" media="screen" /> 
    <script type="text/javascript" src="{% static "bootstrap/js/bootstrap.min.js" %}" ></script>

    </head>

    <html>
    <body>

    <span class="badge badge-success" >HI!</span>
    <span class="badge">1</span>
    <span class="badge badge-warning">4</span>
    <span class="badge badge-important">6</span>
    <span class="badge badge-info">8</span>
    <span class="badge badge-inverse">10</span>

    </body>
    </html>

This code will display badges, however the color of the badges is not displayed. Only a grey badge with some text in each of them is displayed. I ran my code and checked it with FireBug and it said:

    Uncaught ReferenceError: jQuery is not defined                  bootstrap.min.js:6

I assume that I am missing jQuery in this project.

Could someone provide a step by step process on how to fix the issue? I'm new to web development. Thank you for all the input! Much appreciated!

Liondancer
  • 15,721
  • 51
  • 149
  • 255

3 Answers3

1

you need to have jquery library in order to let bootstrap run properly.

Plugin dependencies

Some plugins and CSS components depend on other plugins. If you include plugins individually, make sure to check for these dependencies in the docs. Also note that all plugins depend on jQuery (this means jQuery must be included before the plugin files).

Put this 

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

before the line 

<script type="text/javascript" src="{% static "bootstrap/js/bootstrap.min.js" %}" ></script>

Also, there is no such thing badge-success on Bootstrap 3. Maybe you are using the wrong version

Thai Tran
  • 9,815
  • 7
  • 43
  • 64
  • This fixed the jQuery, however the color problem still exists =[ – Liondancer Sep 10 '13 at 09:20
  • 1
    it doesnt matter if jquery is included before bootstrap as long as you dont try to do any bootstrapping before that point. In fact, it is recommended to place the scripts near

    for better performance - http://stackoverflow.com/questions/14547062/javascript-placed-at-the-end-of-the-document-so-the-pages-load-faster-true

     – davidkonrad Sep 10 '13 at 09:21
  • 1
    @Liondancer right click on the `span` and check on firebug. Does the style of bootstrap appear on the right pane of firebug ? – Thai Tran Sep 10 '13 at 09:24
  • @Thai - you can **see** that bootstrap **is** included in the question, eg "bootstrap.min.js:6" - it is probably the css that is missing or screwed up. – davidkonrad Sep 10 '13 at 09:26
  • 1
    @Liondancer check on the website, there is no such thing `badge-success` on B3. That thing (as I remember) only exist on B2 – Thai Tran Sep 10 '13 at 09:28
  • 1
    @davidkonrad I just want to check if the file really exists in his folder and whether Firefox can actually read it. What if he declare the link on the page but forget to put the file in? – Thai Tran Sep 10 '13 at 09:29
  • Why do you assume people are using FireFox? – davidkonrad Sep 10 '13 at 09:30
  • 1
    it is not assuming. It is only about an example of a browser which use Firebug. Can we just focus on the answer to solve the problem, please? – Thai Tran Sep 10 '13 at 09:33
  • @ThaiTran when I right click span on one of the and the styles say "element.style { }" – Liondancer Sep 10 '13 at 09:35
  • @ThaiTran you're right I was using the wrong version of twitter bootstrap to test if it was working. It does now because I used B3. The B2 website looks very similar to B3. Thank you for clearing this up for me – Liondancer Sep 10 '13 at 09:39
  • @ThaiTran B2 came with badge sucess badge warning.. etc that had default colors. http://getbootstrap.com/2.3.2/components.html#labels-badges I was using them to see if my bootstrap worked. I was using B3 however. There are badge success and badge warning etc in B3 – Liondancer Sep 10 '13 at 09:51
  • 1
    @ThaiTran thank you for your help! it was very very useful and cleared many things up for me! – Liondancer Sep 10 '13 at 09:52
1

I assume that I am missing jQuery in this project. You're assumption is totally correct, so the solution is to include jQuery (just like you included the Bootstrap script).
You can either reference a specific version of jQuery from some CDN (content delivery network), then there's a chance your visitors have already cached this document and they can spare one http request (as can your server). If you choose to reference a script from such a provider, I'd strongly recommend not to use something like //code.jquery.com/jquery-latest.min.js since latest versions obviously change from time to time so you'd have to ensure everything is still working with the newer version.
Of course you can also download a specific version of jQuery and include it just like you did with the Bootstrap script, just make sure you include it before the latter. And you might consider to include the scripts at the end of you page so loading them will not block loading the rest of the page.

Onkel Toob
  • 2,152
  • 1
  • 17
  • 25
0

JQuery is not included in the bootstrap.min.js file, you have to add it as described here: http://getbootstrap.com/getting-started/#template.

If you're using features from jQuery and Bootstrap js files in another js file, don't forget to include your js file after jQuery and Bootstrap.

I would recommend to put your javascript files at the end of your page, before the tag as shown in the bootstrap example. JavaScript files might be significantly heavy and slow down the time to load the page, that's why you put them at the end.

Simon Cateau
  • 651
  • 4
  • 10
  • jQuery is fixed but color of the badges isnt =[ – Liondancer Sep 10 '13 at 09:20
  • 1
    Bootstrap documentation has no mention of badge color: http://getbootstrap.com/components/#badges. I don't think badges have the same "color" pattern as buttons. this fiddle shows how to change the color of a badge: http://jsfiddle.net/D5TfG/ – Simon Cateau Sep 10 '13 at 09:32