Django with Twitter Bootstrap3 and Themes

Question

I've been researching this a long time and experimenting and I can't seem to figure out what the best way to go about accomplishing this. I know I'm doing it wrong so some clarification as well as some quick examples would help a lot.

I was wondering about using a bootstrap3 theme from https://wrapbootstrap.com/ with Django. I researched into the django-bootstrap3 and django-bootstrap-themes packages. On the github page of django-bootstrap-themes it says it's compatible with bootswatch. I don't like their themes so I was wondering if it was compatible with wrapbootstrap.com themes. The themes I would select from wrapbootstrap.com are Responsive HTML themes. I wanted to know if out of personal experience anyone knows which of these packages are best for using themes from wrapbootstrap.com with django.

I understand it is possible to just take from the theme the stylesheets, scripts, place them into their respective folders in static, and turn the HTML base into a base template as well as other pages. Then install bootstrap from a CDN. I know this is also possible with django-bootstrap3. But I can't find the answer anywhere as to what is currently the best way to go about integrating one of those themes and twitter bootstrap3 into a Django website, and some quick examples of doing this.

Thanks, and any advice for doing so would help a ton.

Answer 1

The package django-bootstrap3 is a nice utility app which allows you to produce less HTML markup in your templates that would be otherwise required for bootstrap to work. It uses some additional template tags for this purpose.

I find this package a nice one and sometimes I use it, but it is usually after you have got involved well into bootstrap that you appreciate it.

The package django-bootstrap-themes seems to be an app which it too offers some template tags like the former package, but apparently less. But it also allows you to easily integrate themes from Bootswatch into your Django templates, which is nice if you find those templates appealing. Other than that I personally find no other reason to use it. But again, both packages could be used together if it fits you.

Some examples:

In order to get bootstrap going in your templates without any other package, you would have 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 at the bottom:

<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 becomes:

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

But some other markup gets very much simplified. For instance a bootstrap form (see the official docs example) would become easy as:

<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 load bootstrap with django-bootstrap-themes:

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

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

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

To sum up, if you wish to use any other ready-made bootstrap theme in your templates, you would still need to go with the standard approach that you describe in your question, possibly using some of the above tools on top.