In Bootstrap, Django

Lets get started with adding a theme to our Django project. Right now we have basic Django project so we want to add some styling.

I will be grabbing a theme from startbootstrap.com. Because I am building a admin dashboard the theme i will be using is the SB Admin Theme.

Start by downloading the theme.

Once you have the theme, open up the project folder so you can see all the files.

We wont need all the files so i will take only what i need. I want only the layout and the styling that comes with it.

The layout is the index.html files. We will also want to grab the vendor, js and css folders.

I will copy and paste the selected folders into my django projects static folder.

The index.html file will go into out templates folder in our app. We will rename it to main_template.html.

Now lets test out our template by making it the parent layer to our home page.

We will start by gutting the dummy content in the template. remove everything from line 132 – 713

Inside the “container-fluid” div add content blocks for our pages

Add template to home page

No when you load your page it should look something like this.

The reason for this is that our urls to our css and js have not been configured. Lets take care of this now.

Everywhere we see this:

We need to adjust the path to find this file in our static folder. Make sure you first load static into the template. Be sure you do this everywhere css or js is loaded in statically

That should be it for loading a theme into Django. From here on out you can adjust urls an links to what you need.

Contact Us

We're not around right now. But you can send us an email and we'll get back to you, asap.