good doc and example on how to use bootstrap with DJango

103 views
Skip to first unread message

Thames Khi

unread,
Feb 1, 2017, 5:40:49 AM2/1/17
to Django users
Hi,

I tried to use locally installed bootstrap. My render HTML function is calling my page. However using the relative path or even if add the complete path, nothing works. 

If the html page is opened directly it works.

Is there any decent documentation and examples of using locally installed bootstrap with django?

Thank you very much. 

Andreas Kuhne

unread,
Feb 1, 2017, 5:48:53 AM2/1/17
to django...@googlegroups.com
Hi,

You will have to follow the following information:

Make sure that the css files and js files are in the static directory. Then you can use {% static "css/bootstrap.min.css" %} for the filepath to the static files. The static files shouldn't have absolute file paths because you are accessing them from the webserver and the paths are relative to the current base url (or html file). There is no difference between bootstrap and other css / js files in this regard.

Regards,

Andréas

--
You received this message because you are subscribed to the Google Groups "Django users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to django-users+unsubscribe@googlegroups.com.
To post to this group, send email to django...@googlegroups.com.
Visit this group at https://groups.google.com/group/django-users.
To view this discussion on the web visit https://groups.google.com/d/msgid/django-users/a1b01bab-5236-4bb7-95cf-77c4ee7cc29e%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Thames Khi

unread,
Feb 1, 2017, 10:00:54 AM2/1/17
to Django users
Thank you very much for your reply. I think I have missed something as the python is duplicating the files and sticking them into a path I specified. Here are my steps based on the document and what happens.

1)  updated the urls.py in the project:

from django.conf.urls.static import static

urlpatterns = [
    
url(r'^data/', include('data.urls')),
url(r'^$', views.home, name='home'),
url(r'^admin/', admin.site.urls),
] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

2) In settings,py added the following:


# Static files (CSS, JavaScript, Images)

STATIC_URL = '/static/'
#STATICFILES_DIRS = '/static/'
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "C:/workarea/AWSTest/web/"),
    
]
STATIC_ROOT = "C:/workarea/AWSTest/web/bootstrap/"

url(r'^admin/', admin.site.urls),
] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

C:\workarea\AWSTest\web\data\static\home


3) In your templates, either hardcode the url..

I am not sure about this as I do not want to hardcode things in my templates unless it means the html page then thats cool.

4) python manage.py collectstatic

This went and copied all the files and folders from apps and project folders and put them in ./web/bootstrap

in the app (data) I have also got static files in:

web\bootstrap\data\static\home (root http:/myweb.com/)


Why do I need to specify all these directories and why do I need copies of the static files in my app folder and my static root folder? I think I need to find a video tutorial :(


On Wednesday, February 1, 2017 at 10:48:53 AM UTC, Andréas Kühne wrote:
Hi,

You will have to follow the following information:

Make sure that the css files and js files are in the static directory. Then you can use {% static "css/bootstrap.min.css" %} for the filepath to the static files. The static files shouldn't have absolute file paths because you are accessing them from the webserver and the paths are relative to the current base url (or html file). There is no difference between bootstrap and other css / js files in this regard.

Regards,

Andréas

2017-02-01 11:40 GMT+01:00 Thames Khi <tham...@gmail.com>:
Hi,

I tried to use locally installed bootstrap. My render HTML function is calling my page. However using the relative path or even if add the complete path, nothing works. 

If the html page is opened directly it works.

Is there any decent documentation and examples of using locally installed bootstrap with django?

Thank you very much. 

--
You received this message because you are subscribed to the Google Groups "Django users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to django-users...@googlegroups.com.

Andreas Kuhne

unread,
Feb 1, 2017, 10:58:54 AM2/1/17
to django...@googlegroups.com
The setting you have to specify are:

STATIC_URL and STATIC_ROOT. 

STATIC_URL is the url base for creating paths for the webserver to the static files. Usually you just leave this at '/static/' - however you could also set this to a completely different domain (if for example you were serving static files via cloudfront or other CDN's, or a different server).

STATIC_ROOT is where you want the collectstatic command to copy all files to. Usually a directory within your project. I usually set this to 
STATIC_ROOT = os.path.join(BASE_DIR, 'static/')

You don't need to set STATICFILES_DIRS at all - because that is only when you want to add files that do not reside within one of your applications static dir. 

Also when you use join, you shoiuldn't use absolute paths - you have written : os.path.join(BASE_DIR, "C:/workarea/AWSTest/web/") - you should only use the relative path compared to where your project resides.

Finally - you should put the bootstrap files in a static directory (or a subdirectory to static) under one of you applications. Then run collectstatic - and you will get the files copied to the place you will serve them from (this is not necessary when running in debug though).

Regards,

Andréas

To unsubscribe from this group and stop receiving emails from it, send an email to django-users+unsubscribe@googlegroups.com.

To post to this group, send email to django...@googlegroups.com.
Visit this group at https://groups.google.com/group/django-users.

Thames Khi

unread,
Feb 1, 2017, 3:11:52 PM2/1/17
to Django users
Thanks very much, I will give this a try now.
Regards,

Andréas

Thames Khi

unread,
Feb 1, 2017, 3:35:15 PM2/1/17
to Django users
Thank you so much, you are a legend, sir! I can now continue my learning and combine my python database code with django. 

I am very grateful, thank you for taking the time to explain this to me.

Kind Regards,

TiKhi

Andreas Kuhne

unread,
Feb 1, 2017, 3:45:53 PM2/1/17
to django...@googlegroups.com
Great to see that I could be of help :-)

Regards,

Andréas

To unsubscribe from this group and stop receiving emails from it, send an email to django-users+unsubscribe@googlegroups.com.

To post to this group, send email to django...@googlegroups.com.
Visit this group at https://groups.google.com/group/django-users.

Melvyn Sopacua

unread,
Feb 1, 2017, 9:40:15 PM2/1/17
to django...@googlegroups.com

On Wednesday 01 February 2017 02:40:48 Thames Khi wrote:

 

> I tried to use locally installed bootstrap. My render HTML function is

> calling my page. However using the relative path or even if add the

> complete path, nothing works.

 

Save some time down the road:

https://github.com/dyve/django-bootstrap3

 

> Is there any decent documentation and examples of using locally

> installed bootstrap with django?

 

Answered by Andreas.

--

Melvyn Sopacua

Thames Khi

unread,
Feb 2, 2017, 5:30:05 AM2/2/17
to Django users
Thanks I will take a look. So much to learn too much fun.
Reply all
Reply to author
Forward
0 new messages