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>
2 answers
solution1
0 2018-04-06 15:37:54
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
solution2
-2 2016-10-06 01:44:16
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.