"Custom Email template Design Bootstrap 4.1.1"
Bootstrap 4.1.1 Snippet by Naveen Mandwariya

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="style.css"> </head> <body style="background:#f5f5f5"> <div class="wrapper"> <table> <thead> <tr> <td style="width:800px;text-align:center;"> <img src="https://i.ibb.co/3CHh0z4/logo.jpg" alt="" width="150px"> </td> </tr> </thead> <tbody> <tr> <td style="width:100%;"> <ul class="list-inline"> <li> <a href="#"> Home </a> </li> <li> <a href="#"> About </a> </li> <li> <a href="#"> Services </a> </li> <li> <a href="#"> Blog </a> </li> <li> <a href="#"> Contact </a> </li> </ul> </td> </tr> <tr style="width:800px;"> <td style="width:800px;"> <img src="https://i.ibb.co/JKJDghC/IT-Technology-stock-image-12449054-1.jpg" alt="" style="width:100%;"> <p style=" text-align:center; font-family:cursive; text-transform:uppercase; margin-bottom:40px;font-size:24px; margin-top:40px;line-height:30px; font-weight:bold; color:#484a42;"> Best Artical Of the year </p> </td> </tr> </tbody> </table> <table cellpadding="0" cellspacing="0" border="0" width="100%"> <tbody> <tr valign="top"> <td width="30"><p style="margin:0; font-size:1px; line-height:1px;"> </p></td> <td> <a style="display:block; margin:0 0 14px;" href="#"><img src="https://i.ibb.co/6bJNgGN/technology-support-two-people-opt1-e1486584202406.jpg" width="255" height="150" alt="More" style="display:block; margin:0; border:0;width:100%; height:240px; background:#eeeeee;"></a> <p style="font-size:18px; line-height:22px; font-weight:bold; font-family:cursive; color:#333333; margin:0 0 5px;"><a href="#" style="color:#6c7e44; text-decoration:none;">Lorem ipsum dolor sit amet, consectetur adipiscing elit</a></p> <p style="margin:0 0 35px; font-size:15px; line-height:18px; font-family:cursive; color:#333333;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. .</p> </td> <td width="30"><p style="margin:0; font-size:1px; line-height:1px;"> </p></td> <td> <a style="display:block; margin:0 0 14px;" href="#"><img src="https://i.ibb.co/KVhQHMB/paid-campaigns-500x500.jpg" width="255" height="150" alt="More" style="display:block; margin:0; border:0; width:100%; height:240px; background:#eeeeee;"></a> <p style="font-size:18px; line-height:22px; font-weight:bold; font-family:cursive; color:#333333; margin:0 0 5px;"><a href="#" style="color:#6c7e44; text-decoration:none;">Lorem ipsum dolor sit amet, consectetur adipiscing elit</a></p> <p style="margin:0 0 35px; font-size:15px; line-height:18px; font-family:cursive; color:#333333;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. .</p> </td> <td width="30"><p style="margin:0; font-size:1px; line-height:1px;"> </p></td> </tr> <tr valign="top"> <td width="30"><p style="margin:0; font-size:1px; line-height:1px;"> </p></td> <td colspan="3"> <a style="display:block; margin:20px 0 14px;" href="#"><img src="https://i.ibb.co/FwBxTX7/image1.jpg" width="100%" height="400" alt="More" style="display:block; margin:0; border:0; background:#eeeeee;"></a> <p style="font-size:18px; line-height:22px; font-weight:bold; font-family:cursive; color:#333333; margin:0 0 5px;"><a href="#" style="color:#6c7e44; text-decoration:none;">Lorem ipsum dolor sit amet, consectetur adipiscing elit</a></p> <p style="margin:0 0 35px; font-size:15px; line-height:18px; font-family:cursive; color:#333333;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. .</p> </td> <td width="30"><p style="margin:0; font-size:1px; line-height:1px;"> </p></td> </tr> </tbody> </table> <table bgcolor="#FFFFFF" style="width:100%;"> <tbody> <tr> <td style="width:100%;"> <p style="margin:0; border-top:2px solid #e5e5e5; font-size:5px; line-height:5px; margin:0 30px 29px;"> </p> </td> </tr> </tbody> </table> <table cellpadding="0" cellspacing="0" border="0" width="100%" margin-bottom:40px;> <tbody> <tr valign="top"> <td width="30"><p style="margin:0; font-size:1px; line-height:1px;"> </p></td> <td> <p style="margin:0 0 4px; font-weight:bold; color:#333333; font-size:16px; line-height:22px;">Lorem & Ipsum sit amet.</p> <p style="margin:0; color:#333333; font-size:13px; line-height:18px; margin-bottom:40px;"> 400005 Dummy Address, Dummy, Lorem ipsum 56<br> Help & Support Center: 0000 000 000<br> Website: <a href="#" style="color:#6d7e44; text-decoration:none; font-weight:bold;">www.yourcompany.com</a> </p> </td> <td width="30"><p style="margin:0; font-size:1px; line-height:1px;"> </p></td> <td width="120"> <a href="#" style="float:left; width:24px; height:24px; margin:6px 8px 10px 0;"> <img src="https://i.ibb.co/d25kCr2/facebook.png" width="24" height="24" alt="facebook" style="display:block; margin:0; border:0; background:#eeeeee;"> </a> <a href="#" style="float:left; width:24px; height:24px; margin:6px 8px 10px 0;"> <img src="https://i.ibb.co/tKFSTJF/twitter.png" width="24" height="24" alt="twitter" style="display:block; margin:0; border:0; background:#eeeeee;"> </a> <a href="#" style="float:left; width:24px; height:24px; margin:6px 8px 10px 0;;"> <img src="https://i.ibb.co/NpZ8jV5/tumblr.png" width="24" height="24" alt="tumblr" style="display:block; margin:0; border:0; background:#eeeeee;"> </a> <a href="#" style="float:left; width:24px; height:24px; margin:6px 0 10px 0;"> <img src="https://i.ibb.co/K0CD4Yt/rss.png" width="24" height="24" alt="rss" style="display:block; margin:0; border:0; background:#eeeeee;"> </a> <p style="margin:0; font-weight:bold; clear:both; font-size:12px; line-height:22px;"> <a href="#" style="color:#6d7e44; text-decoration:none;">Visit website</a> </p> </td> <td width="30"><p style="margin:0; font-size:1px; line-height:1px;"> </p></td> </tr> </tbody> </table> </div> <!--wrapper closed --> </body> </html>
ul.list-inline li { display: inline-block; width: 18%; margin: 0 auto; text-align: center; } ul.list-inline li a{ color:#333; text-decoration:none; text-transform:uppercase; } .wrapper{ width:800px;background:#fff; margin:0 auto; border-radius:2px; box-shadow: 1px 2px 25px 1px #0000001f; } ul.list-inline li { display: inline-block; width: 18%; margin: 0 auto; text-align: center; } ul.list-inline li a{ color: #333; text-decoration: none; text-transform: uppercase; font-family: cursive; font-size: 14px; font-weight: 600; }

Related: See More

Rotating CSS Card
Responsive Invoice template
BS4 clean & simple invoice template
Elegant Bootstrap 4 message chat box template

Questions / Comments: