7

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.

Improve this question
2
  • 1
    "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. " Why, what is wrong with this approach? Since these themes don't come as django apps, I can't think of any other approach really. Commented May 23, 2015 at 21:28
  • There are the django packages I mentioned. I wanted to know if anyone had any experience with them and found them easier or better for integrating bootstrap themes. I know they add some template tags, and some other stuff, I want to hear some opinions and get some usage advice on using django-bootstrap3 and django-bootstrap-themes together with a theme like those HTML responsive themes from wrapbootstrap.com. I researched all the packages and gave it a try but I coudln't wrap my brain around it. Commented May 23, 2015 at 23:58

1 Answer 1

Reset to default
10

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.

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

1 Comment

Assuming the theme has its own modifications the the default bootstrap3 styles for certain UI elements. Will just including their style sheet make them work or would I have to forgo the normal bootstrap CSS file, do theme authors typically mark those things important when trying to override the default styles ? I know they are probably all different. But do you have any experience integrating a theme into django and bootstrap3? Can you give me any specific advice ?

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.