'How Can i use bootstrap for email templates?

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>
twitter-bootstrapemail


Solution 1:[1]

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

Solution 2:[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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Jaffar
Solution 2 Daniel Nordh

Related Questions