How Can i use bootstrap for email templates?

Question

I am trying to make nice responsive emails and was wondering how i can include bootstrap to it. I am using mac mail app. I no there are a lot of third party app but i want to make my own template. So far i have been attaching html In email signature files but it doesnt have a head section for me to include bootstrap. Or even if not bootstrap what is the way to create responsive grids in email?

I have something like this:

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>[REPLACE THIS WITH YOUR TITLE]</title>
        <style media="all" type="text/css">
        [READ THE MINIFIED CSS FILE IN SEPARATELY AND INSERT IT HERE. YOU *CANNOT* JUST USE A CSS REFERENCE.]
    </style>
</head>
<body>
    <table cellspacing="0" cellpadding="0" border="0" width="100%">
        <tr>
            <td class="navbar navbar-inverse" align="center">
                <!-- This setup makes the nav background stretch the whole width of the screen. -->
                <table width="650px" cellspacing="0" cellpadding="3" class="container">
                    <tr class="navbar navbar-inverse">
                        <td colspan="4"><a class="brand" href="[YOUR WEB URL]">Bootstrap For Email</a></td>
                        <td><ul class="nav pull-right"><li><a href="[YOUR LOGIN URL]">Log On</a></li></ul></td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td bgcolor="#FFFFFF" align="center">
                <table width="650px" cellspacing="0" cellpadding="3" class="container">
                    <tr>
                        <td>[BODY CONTENT GOES HERE]</td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td bgcolor="#FFFFFF" align="center">
                <table width="650px" cellspacing="0" cellpadding="3" class="container">
                    <tr>
                        <td>
                            <hr>
                            <p>[PUT YOUR COPYRIGHT OR OTHER FOOTERY GOODNESS HERE]</p>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</body>
</html>

Possible duplicate of [Has anyone gotten HTML emails working with Twitter Bootstrap?](https://stackoverflow.com/q/9732580/1255289) — miken32, Sep 12 '18 at 14:56

score 2 · Answer 1 · answered Apr 06 '18 at 15:37

For creating email template is different from web template. If you want to create email templates yourself, you've to use the internal and inline styles not external css includes will not work. But, you can use the external link images for your template. There are many sources available in the internet for creating responsive email templates. Find the links below. You might get some idea about

https://litmus.com/community/learning/24-how-to-code-a-responsive-email-from-scratch https://www.copernica.com/en/documentation/how-to-create-a-responsive-html-email-from-scratch

score -2 · Answer 2 · edited Nov 27 '19 at 09:17

-2

In my experience, if you include css file in your email template maybe not effect, you should make css code in your email template direct. like this:

<div style="color:#FFFFFF">...</div>

edited Nov 27 '19 at 09:17

Daniel Nordh

362
3
15

answered Oct 06 '16 at 01:44

Bisland

1

what if i want to include a google font? must it all be image? – ali Oct 07 '16 at 05:54
The email reader software need to support google font, btw image maybe not show in some email reader software. – Bisland Oct 08 '16 at 13:33

How Can i use bootstrap for email templates?

2 Answers2