problem with integrating bootstrap 3.1.1 and django 1.6

206 views
Skip to first unread message

rafiee.nima

unread,
Mar 9, 2014, 12:41:11 PM3/9/14
to django...@googlegroups.com
hi

I am new to bootstarp and I want to use it in my django project.
I put the needed folder's(css , js , img) in my project static folder and config my setting.py to access static directory
I can access bootstrap.css from http:///..myprojecet/static/bootstrap.css which means I correctly config setting.py
but the problem is that no bootstrap style applied to my temeplates. (I also check in  firebug if css and js files been inclueded )

here is my base.html code that other templates inhierent from it

{% load static %}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
 <link href="{% static 'css/bootstrap.min.css'% }" rel="stylesheet" media="screen">
<link href="{% static 'css/bootstrap-theme.min.css' %}" rel="stylesheet">
 </head>
<body>
<div class="btn-group dropup">
  <button type="button" class="btn btn-default">Dropup</button>
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
  </ul>
</div>
{% block body_block %}
{% endblock %}

<script src="{% static 'js/jquery-2.1.0.js"></script>
<script src="{% static 'js/bootstrap.min.js"></script>
</body>
</html>




Camilo Torres

unread,
Mar 9, 2014, 2:59:37 PM3/9/14
to django...@googlegroups.com
Hello,

This URL looks bad:  http:///..myprojecet/static/bootstrap.css
What is in your settings.py?
Should it be: {% static 'bootstrap.min.css'% }?

rafiee.nima

unread,
Mar 9, 2014, 4:29:02 PM3/9/14
to django...@googlegroups.com


tnx for reply
the actual ulr was http://127.0.0.1:8000/static/css/bootstrap.min.css which I use to test if I correctly configure static path and url in my setting.py
I attached my setting.py 
settings.py

Camilo Torres

unread,
Mar 13, 2014, 10:33:38 PM3/13/14
to django...@googlegroups.com
Hello,

Your configuration seems OK to serve static content from withing application directories.

Where in the file system are you putting your static file (css/bootstrap.min.css)?

Try this:
if you already have an application, use that, else create one like this:

python manage.py startapp testapp

Inside the newly created test app directory, create static/css/ and put your file there. Now try to reload your template to see if the template loads.

This may make it work for you, but in your case, is not the final solution. You may need to actually put these static files that are 'site global' in a central location in your filesystem, let's say: /var/www/static/(css|js|etc)

To do that, you need to add a setting to your settings.py:
STATICFILES_DIRS = (
    '/var/www/static/',
)
That way you put all of your static site wide files inside subdirectories in a common path.

Regards,
Camilo

Tom Evans

unread,
Mar 14, 2014, 12:19:32 PM3/14/14
to django...@googlegroups.com
On Fri, Mar 14, 2014 at 2:33 AM, Camilo Torres <camilo...@gmail.com> wrote:
> python manage.py startapp testapp
>
> Inside the newly created test app directory, create static/css/ and put your
> file there. Now try to reload your template to see if the template loads.
>
> This may make it work for you, but in your case, is not the final solution.
> You may need to actually put these static files that are 'site global' in a
> central location in your filesystem, let's say: /var/www/static/(css|js|etc)
>
> To do that, you need to add a setting to your settings.py:
>
> STATICFILES_DIRS = (
> '/var/www/static/',
> )
>
> That way you put all of your static site wide files inside subdirectories in
> a common path.

This advice is wrong, do not copy your static files from
<appname>/static to a folder listed in STATICFILES_DIRS.

STATICFILES_DIRS is a list of _additional_ project folders that are
searched for files _in addition_ to your application static files.

However, you do need to copy the files from your application static
directories _and_ your project static file directories to the
directory specified by STATIC_ROOT. You do not do this manually, the
management command collectstatic does this for you. You also only need
to do this in production, in development (using runserver), the static
files are served for you by runserver.

For complete info on static files, there is an excellent step-by-step doc:

https://docs.djangoproject.com/en/1.6/howto/static-files/

Cheers

Tom

rafiee.nima

unread,
Mar 16, 2014, 2:28:50 AM3/16/14
to django...@googlegroups.com, teva...@googlemail.com
I'm using development server . and when i use  <link href="{{STATIC_URL}}css/bootstrap.css" rel="stylesheet" media="screen"> it seems work correctly but when I use <link href="{% static 'css/bootstrap.min.css' %}css/bootstrap.css" rel="stylesheet" media="screen">  my project file and directory structure is like :
  1. root project folder
    1. app folder
  2. static
    1. css
      1. bootstarp.css
    2. js
    3. img
  3. media
  4. template
    1. app
      1. base.html

Camilo Torres

unread,
Mar 16, 2014, 4:38:47 PM3/16/14
to django...@googlegroups.com, teva...@googlemail.com
On Sunday, March 16, 2014 1:58:50 AM UTC-4:30, rafiee.nima wrote:
I'm using development server . and when i use  <link href="{{STATIC_URL}}css/bootstrap.css" rel="stylesheet" media="screen"> it seems work correctly but when I use <link href="{% static 'css/bootstrap.min.css' %}css/bootstrap.css" rel="stylesheet" media="screen">  my project file and directory structure is like :
  1. root project folder
    1. app folder
  2. static
    1. css
      1. bootstarp.css
    2. js
    3. img
  3. media
  4. template
    1. app
      1. base.html
Hello,

<link href="{% static 'css/bootstrap.min.css' %}css/bootstrap.css" rel="stylesheet" media="screen"> 

should be:

<link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet" media="screen">

Camilo
Reply all
Reply to author
Forward
0 new messages