HTML Snippets for Twitter Boostrap framework : Bootsnipp.com

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/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 ---------->
<body>
    <center class="wrapper">
        <div class="webkit">
            <!--[if (gte mso 9)|(IE)]>
            <table width="600" align="center">
            <tr>
            <td>
            <![endif]-->
            <table class="outer" align="center">
                <tr>
                    <td class="full-width-image">
                        <img src="https://tutsplus.github.io/creating-a-future-proof-responsive-email-without-media-queries/images/header.jpg" width="600" alt="Gaadiexpert ogo" />
                    </td>
                </tr>
                <tr>
                    <td class="one-column">
                        <table width="100%">
                            <tr>
                                <td class="inner contents" bgcolor="ffffff">
                                    <p class="h1">Forgot your Password? </p>
                                    <p>We received a request to reset your instagram's password.</p>
                                    <p>To reset your new password. The link will be active for one hour. </p>
                                    <p>If your ignore, Password won't be changed.</p>
                                    
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <tr>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/* Basics */
body {Margin: 0;padding: 0; min-width: 100%;background-color: #e2e2e2;}
table {border-spacing: 0;font-family: sans-serif;color: #333333;}
td {padding: 0;}
img {border: 0;}
.wrapper {width: 100%;table-layout: fixed;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;}
.webkit {max-width: 600px;}
.outer {Margin: 0 auto; width: 100%;max-width: 600px;}
.inner {padding: 10px;}
a { color: #ee6a56; text-decoration: underline;}
.h1 {font-size: 21px;font-weight: bold; Margin-bottom: 18px;}
.h2 {font-size: 18px;font-weight: bold; Margin-bottom: 12px;}
.full-width-image img {width: 100%; max-width: 600px;height: auto;}
/* One column layout */
.one-column .contents { text-align: left;}
.one-column p { font-size: 14px;Margin-bottom: 10px;}
/*Media Queries*/
@media screen and (max-width: 400px) {
    .two-column .column,
    .three-column .column {
        max-width: 100% !important;
    }
    .two-column img {
        max-width: 100% !important;
    }
    .three-column img {
        max-width: 50% !important;
    }
}
@media screen and (min-width: 401px) and (max-width: 620px) {
    .three-column .column {
        max-width: 33% !important;
    }
    .two-column .column {
        max-width: 50% !important;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
https://reallygoodemails.com/transactional/alert/reset-your-lingo-password/
You have got a new password.
The Password for username {} hasbeen successfully changed.
I didn't request! Help [button]
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"2. Single column content - Email Design"
Bootstrap 3.3.0 Snippet by jeevan123456

Related: See More

Questions / Comments:

"2. Single column content - Email Design" Bootstrap 3.3.0 Snippet by jeevan123456

Related: See More

Questions / Comments:

"2. Single column content - Email Design"
Bootstrap 3.3.0 Snippet by jeevan123456