Search⌘ K
Home
Courses
The Django Admin for Web Developers

More Customisation

Explore how to enhance the Django Admin interface by adding Bootstrap styles, overriding default templates for the index and login pages, implementing animations, customizing model order on the admin index, and applying custom styles to create a more dynamic and user-friendly admin experience.

We'll cover the following...

Adding bootstrap

To integrate the bootstrap library, you will modify your author/change_list.html, and include the library in the {{block.super}} (line 7).

<link 
   rel="stylesheet" 
   href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
   integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
   crossorigin="anonymous"
   >
<script
   src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
   integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
   crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" 
   integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" 
   crossorigin="anonymous"> </script>
<script 
   src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" 
   integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" 
   crossorigin="anonymous"> </script>

Now, you can use Bootstrap everywhere in your page. For example, you will add a simple danger alert UI banner in your author’s change_list.html page (line 53 of unedited file).

<div class="alert alert-danger"
...