It turned out not as easy for somebody whose everyday experience with responsive templates is limited to changing colleagues’ work.

UPDATED. 12^th September 2020: I did not manage to make my own Bootstrap Email Templates not be ignored by Gmail, so I used TedGoas’ Cerberus for LingoMost and I strongly recommend you as well.

Email Templates that work [with Gmail]

I strongly recommend taking a good Email template made by professionals like TedGoas’ Cerberus. I changed it a bit to fit my needs and I love how it worked.

How it originally looks (opened in Gmail):

How I changed it(opened in Gmail):

General Notes

Text files of emails must be in your allaauth/account/email/ directory. Even if you add html there, it won’t help – you will receive html code.

So you need to create .html files with the same names. Specifically, create email_confirmation_message.html for Email confirmation.

If you want to change Email subjects, go and do it in files that has name ending with _subject.txt.

My attempt at BS4 template [Gmail hates it]

I tried to use Bootstrap and specifically some of their examples. I picked Jumbotron.

Modified it as I liked and made a base.html out of it in order to use with other emails templates.

CSS file. If you want to use, say, Bootstrap, you’ll have to copy the necessary styles to your. As well as your own styles. I recommend using classes even though you won’t be able to make links to the .css file in Email template like this:

<link href="{% static 'css/email.css' %}" rel="stylesheet">

Say, you have:

<link rel="stylesheet" href="/css/bootstrap.min.css">
<link href="/static/css/extra/email.css" rel="stylesheet">

To not get confused, place your <style></style> block in the same order right at that place, don’t make one big fat <style></style>:

{#    Bootstrap 4    #}
<style></style>
{#    Your styles    #}
<style></style>

Pictures. No kind of static works, both .css files and pictures.

You will need to host them somwhere. An absolute link is fine. Like for my logo the link is:

https://djangokatya.files.wordpress.com/2020/09/pyton.png

And the picture itself:

Results of this attempt are available at GitHub. Again, the base is Jumbotron by Bootstrap.

Other mobile screen’s sizes:

• 

• 

•