Create Responsive HTML Email Template


In this article, we are creating responsive HTML email template design. Nowadays, most of the email is opened on the mobile devices. So in this article, we show you how to create this responsive HTML email template design from scratch. We are using the bootstrap framework to create an attractive user interface and clean design. Especially, when you want to make a responsive design bootstrap framework take a heavy lifting of the code. So you don’t care about anything.

In this tutorial, we are creating this.

Responsive HTML Email Template

So in this tutorial, we are creating this amazing responsive HTML email template design. So let’s jump into the code and look out the design.

Before you start Creating this design

  • Familiar with HTML  and CSS
  • Basic Understanding of the Bootstrap Framework
  • Familiar with Visual Code Editor

Create Index.html and Style.css

First, create a project in Visual Code Editor and create Index.html and Style.css file in the project. If you are not familiar with visual code editor then you can use another one also like atom and sublime text. But we personally preferred you to use the visual code editor.

In index.html file Create simple HTML5 Snippets.

In this code, we put the meta name viewport to make this responsive. Then just add the title Responsive email for the page.

After that Create Style.css file to style the elements. We are creating media query in the style.css file to make page responsive for tablet and mobile devices.

Link Bootstrap and Font Awesome Icons

After that, we will link external file. Our External file was the bootstrap framework, font awesome icons, and custom CSS stylesheet. what we will do is we will link the bootstrap CDN to the index.html file in the head section and also link the font awesome icon website CDN to the index.html file.

At the last, we will link style.css file.

To link this file you just need to copy the following code and paste it into the head section.

Design Body

Now we will design the body section. Here in this section, we put rows and columns. These rows and columns work like table row and table columns. we are using row class to create a new row and col-md-12 class to create a new column. Bootstrap has a grid system to create row and columns. This system is basically for creating a clean and responsive design. So we use this in our code.

Don’t confuse, We will explain this code now.

First, we had created a container bootstrap class in the body tag and put the outer-panel class inside of the container. we add text-center and rounded bootstrap class to center all text and add the border-radius to the outer panel.

After that, we put the icon on the top using font awesome website. So we will insert this icon using I tag. Then create div with inner-panel class with rounded bootstrap class.

In the above code, you will see we create a new row and add three col-md-12. In the first column, we will insert h6 heading tag with margin-top and then add the paragraph with some demo text.

After that, we will create the second column were we insert image tag with style. In the style, we will specify width, height and specify alt text.

Then we will create another column and insert paragraph and add demo text inside of the paragraph and then add the button with bootstrap btn warning class. and specify demo text.

After that, we will create a new row and add col-md-2 class. In this column add your icon with padding 4 and specify the background color.

Then we will add col md 10 class and add padding. After this, we will add heading 6 with responsive design text and add the paragraph with demo text.

After that, we will create the same layout for the second column also but just change the text. In the end, we will put the twelve column grid and put the heading and anchor tag.

Now, After adding all the columns and rows we will add another row to the footer. So we will create twelve column grid with footer tag and specify padding to it.

Then create a d-flex and flex-row class. In this class, we will put the social icons and add circle class to it. You can use the rounded bootstrap class to achieve the rounded border but we are creating our own. At the last, we will add the paragraph with demo text.

I hope you understand this layout and code.

Style.css

After this, we will create the style for this design. We already specify the classes for the HTML element. Now we will create the style for this HTML elements.

In style.css file just import this code.

In this code, we created a simple style for the HTML Elements. You will see the media query in the style.css. Using this we will make the page responsive. Here we will just specify the width for the outer-panel and specify padding.

After this, we specify the far class and d-flex class and add margin left and padding. In the end, we will add the circle and remove the border.

Done.

Now just run the page and see the result.

Your responsive HTML email template is created. If you have any question the write me in the comment section.

We will see you in the next article.

Thank You.