Introduction

When first learning how to integrate my Bootstrap and Django, I wasn’t able to find a quick cheat sheet to reference without visiting different documentation pages. To help others I’ve put together a list below of the tags I used most often. A full list of Django tags and filters can be found here.

Django Cheat Sheet: Bootstrap To Django

Extending Files

Headers, Navbar, and Footer

The neat part about Django is that everything is modular, meaning the code is created in repeatable chucks. This allows the developer to easily implement the components of code that stay the same across the site including the header, navigation bar, and footer.

Below is the code I used for my header, footer, and navbar. If you read the comments in the code, they’ll explain the different parts as well as what to change for your own project. Please read below the code for more details.

Looking at the code above, everything with the “{%   %}” is specific to Django. For each of these “{% %}” chunks you could choose to call the specific block of code and extend it. Extending means calling the block of code using a single line of code instead of rewriting everything. I’ve found it is easiest to extend the entire set up (i.e. header, navbar, and footer) using this snippet of code at the beginning of each new html file:

The file above could also be called your ‘base.html’. I’ve only called it repeatable_content.html to make a point that you should put anything that repeats on every page into this file. If you are reading stack overflow and they refer to the base.html, this is the file they’re often referring to.

Also be sure to include the {% load staticfiles %} at the beginning of each page so that your css, javascript, and images load properly. Also leave the body content empty in the above code (unless it’s repeatable) because this should change for every new page.

Titles

Putting a title at the top of  the page in Django is slightly different than normal bootstrap. To get the title to appear I used the following code:

BootStrap vs Template UI Kit

As a refresher, the layout in bootstrap is created using a grid system comprised of containers, rows, and columns. There are two ways to do the bootstrap interface in Django. One way is to code bootstrap as you have traditionally with only a few changes we’ll discuss below. The second way is to download the Django Bootstrap UI Kit and choose template theme to start out with. You can overwrite anything in the template file that you don’t like but it provides a good starting point for a project.

In the example above, I was writing code in the way you’d traditionally write bootstrap code. If you’d like to use the Django Bootstrap UI Kit you’ll need to follow the instructions provided here.

Here are some of the template examples that are provided by the UI Kit:

Bootstrap example themes

Filling In the Content

Adding Images

Adding images to the content has a slightly different syntax in Django than in HTML.

In Django all of the images that are uploaded through the admin panel go into the ‘Media’ file, which is placed at the same level as your manage.py in the file directory. When you upload a new image into Django, Django will automatically rename the file to give it a unique address. That’s why you’ll see the ‘_’ and numbers/letters appended after the original name of the file (see media file below).

example of file hierarchy in Django

The {{cafe.file_up}} is coming from my model and the admin panel. In the model view below, you’ll be able to see where the name of my class, ‘cafe’ has an attribute ‘file_up’

In the view below it shows where the researcher uploads the image in the Admin Panel.

This is the cafe view in the Admin panel

This shows up because in the admin.py file I defined that view:

See that ‘Cafe’ is listed as one of the import options into the Admin panel.

Adding Links

Adding links in Django has a different syntax than typical HTML. Looking at the code below you’ll see the typical HTML anchor tag <a> but inside of the ‘href’ you’ll see the curly braces and percent signs “{% %}” typical to Django.

To go to another page using Django the url is doing a couple of things. First, the ‘cafe.url’ is telling Django the view to be displayed and it’s HTML file name, so the file can be located to display. Here is my cafe.url snippet:

Since my cafes are location specific, I’ve added in some regular expressions so that each view is location specific.

Second, the url is calling the view that I’ve defined as ‘cafe’ so that when you click Django knows the type of content that should be shown on the page as defined by what you call in your HTML file.

In the case above, my next page will be able to show location specific information about the cafes being highlighted in the project including a number of exhibits about different cafes in the same city.

 

Getting Content to Populate

if and for statements

Since Django is Python based, you can use ‘if’ and ‘for’ statements to populate content on the page.

In this code the first thing that is called is an ‘if’ statement. This is to call the ‘cafes’ class from the model.py (see above). Next I call a ‘for’ statement to make the code iterate through the model multiple times. This is a huge time saver because otherwise I’d have to code every single cafe by hand and add in a new cafe each time. This way, the cafes automatically populate. To get the information to populate in each row, you need to add in a specific line of code that iterates through the rows of data:

This line of code is also provided in the example above. Between the code where is says “#Put the code here you want to iterate through”, this is where you put elements of your class in the Django model you’d like to populate from (in my case ‘cafe’).

Adding in a Gallery

One of the elements I really like about Bootstrap is the gallery where you can flip through pictures. It’s a great way to highlight the images that are important to your projects. Here’s an example of a gallery:

Example of a bootstrap gallery

Above is a gallery example that I used for another site to show off clothing collages of products. You’ll notice you can click the left and right arrows to go through the gallery. To implement this gallery you’ll need to create a Model for the project similar to what’s been described above. Below is the code to implement the bootstrap gallery in Django:

adding in a Leaflet map/jumbotron

Adding a leaflet map is also possible with Django. To get the map to fit the constraints of the screen width and height I utilized the jumbotron feature of Bootstrap (see below).

leaflet map example

Here is the code to implement a map like what’s seen above, although you’ll have your own data points because on the model you set up.

You’ll notice in the ‘var geo_JSON’ tag that Django tags are still being implemented from the Model i.e. {{city.latitude}}. There’s some customization that’ll need to be done to the code to get your own data points to load, and I’ve tried to note the purpose of each code line above to help make that process easier.

Thank You

Thanks for reading! I hope you found this post helpful. If there’s topics you’d be interested in learning more about comment below.

 

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s