0

I currently have twitter bootstrap incorporated on my Django test site but it is not working properly.

I tested out an example of code on the bootstrap website: http://getbootstrap.com/2.3.2/components.html#labels-badges

All I had on the site is the success badge (green oval with a 2 in the middle)

 <span class="badge badge-success">2</span> 

However, only the oval and the "2" would be displayed but the green color round the "2" is not displayed. All I see is a grey oval with a "2" inside. Pretty much the same as the DEFAULT badge on the bootstrap website except there is a "2" instead of a "1".

I was wondering if anyone with Django and twitter bootstrap experience would help me with this issue.

Here is my views.py:

 from django.http import HttpResponse from django.template import RequestContext, loader from django.shortcuts import render, render_to_response def index(request): return render(request,'homepage/index.html') 

Here is my html file:

 {% load staticfiles %} {% load compressed %} <!DOCTYPE html> <head> {% compressed_js 'bootstrap' %} {% compressed_css 'bootstrap' %} </head> <html> <body> <span class="badge badge-success">2</span> </body> </html> 

Thank you for all the help! much appreciated!

11
  • 1
    is "2" really displayed in grey or in black ? Commented Sep 9, 2013 at 7:54
  • @FoxMaSk So the badge is all grey but the "2" is white. Commented Sep 9, 2013 at 7:57
  • 1
    did you try with another badge-xxx CSS class to see if its linked to badge-success or linked to all the badge-xxx CSS class ? Commented Sep 9, 2013 at 7:58
  • Ill try that right now! Commented Sep 9, 2013 at 8:00
  • @FoxMaSk I just tried every badge and they all have the same output. A grey badge with white text in the middle =/ Commented Sep 9, 2013 at 8:04

1 Answer 1

1

I think your compressed_js and compressed_css does not do the trick. To check if everything is ok, use for exemple FireBug, then press F12 and point your mouse on the badge to see if the CSS rule is display on the left panel. Repeat this step for badge-success to try to find it.

After all of this i'll suggest a more classical way without compressed_xxx :

<link rel="stylesheet" href="{% static "bootstrap/css/bootstrap.min.css" %}" type="text/css" media="screen" /> <link rel="stylesheet" href="{% static "bootstrap/css/bootstrap-responsive.min.css" %}" type="text/css" media="screen" /> 

where bootstrap is the folder I put in the static one I setup in the settings.py file

Hope this will be usefull.

Sign up to request clarification or add additional context in comments.

1 Comment

This was incredibly useful THANK YOU!

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.