Django with Twitter Bootstrap3 and Themes

Question

I studied this for a long time and experimented, and I cannot figure out how best to do this. I know that I am doing it wrong, so some clarifications as well as some quick examples will help a lot.

I was interested in using the bootstrap3 theme from https://wrapbootstrap.com/ with Django. I explored the django-bootstrap3 and django-bootstrap-themes packages. The github django-bootstrap-themes page says that it is compatible with bootswatch. I don’t like their themes, so I was wondering if it is compatible with wrapbootstrap.com themes. The themes I would choose from wrapbootstrap.com are Responsive HTML Themes. I wanted to know if anyone from personal experience knows which of these packages is best suited for using themes from wrapbootstrap.com using django.

I understand that you can simply take stylesheets, scripts from a theme, put them in their respective folders in statics and turn the HTML base into a base template, as well as other pages. Then install bootstrap from the CDN. I know this is also possible with django-bootstrap3. But I can't find an answer anywhere regarding what is currently the best way to integrate one of these themes and twitter bootstrap3 into the Django website and some quick examples of this.

Thanks, and any advice for that will help a ton.

Answer 1

The django-bootstrap3 package is a nice utility application that allows you to create less HTML markup in your templates that would otherwise be required for bootstrap to work. For this purpose, some additional template tags are used.

I find this package enjoyable, and sometimes I use it, but as a rule, after you get involved in bootstrap, you will appreciate it.

The django-bootstrap-themes package seems to be an application in which it also offers some template tags, such as the old package, but apparently less. But it also makes it easy to integrate themes from Bootswatch into your Django templates, which is nice if you find these templates attractive. In addition, I personally do not find other reasons for using it. But then again, both packages can be used together if they suit you.

Some examples:

To get the bootstrap bootstrap in your templates without any other package, you will need to include the following in your base html file:

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"> {# HTML5 shiv and Respond.js for IE8 support of HTML5 elements and media queries #} {# WARNING: Respond.js doesn't work if you view the page via file:// #} <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> 

And below:

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 

With django-bootstrap3 this will become :

 {% load bootstrap3 %} {% bootstrap_css %} {% bootstrap_javascript %} 

But some other markups are very simplified. For example, the bootstrap form (see the white paper ) will become simpler:

 <form action="/url/to/submit/" method="post" class="form"> {% csrf_token %} {% bootstrap_form form %} {% buttons %} <button type="submit" class="btn btn-primary"> {% bootstrap_icon "star" %} Submit </button> {% endbuttons %} </form> 

To download a boot file using django-bootstrap-themes :

 {% load bootstrap_themes %} {% bootstrap_script use_min=True %} 

And, apparently, this is how you can use one of the themes from bootswatch:

 {% bootstrap_styles theme='cosmo' type='min.css' %} 

To summarize, if you want to use any other ready-made bootstrap themes in your templates, you still have to go with the standard approach that you describe in your question, perhaps using some of the above tools on top.