Daryl Shannon
Posted on January 31, 2020
In this article, we’re going to build a responsive Bootstrap invoice template. Many times we need to display a HTML invoice in our application, we want it to look slick on mobile too.
So what is “Responsive Design”?
In a nut shell, responsive design is a website that adapts to different screen sizes. This means that it is easy to read and interact with on a mobile devices and desktops. The cool thing about this is we don’t need to develop a different site for mobile and one for desktop, the one design will do both.
What is “Bootstrap”?
Bootstrap is the most popular CSS Framework for developing responsive and mobile-first websites. It’s very well documented and a really great starting point for getting into responsive design. Alternatively, you might want to check out Tailwind. It’s a beautiful framework with the same approach to responsive design. You could easily adapt this template to work with Tailwind.
Getting started
To ensure your website is responsive, you need to make sure you place the correct meta tag inside the head of your web pages like so:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
A <meta> viewport element gives the browser instructions on how to control the page's dimensions and scaling.
The width=device-width part sets the width of the page to follow the screen width of the device and the initial-scale=1.0 part sets the initial zoom level.
Using a custom font
For our example, I want to use a custom font “Roboto” pulled in from Google Fonts. A nice little boost to performance when using Google Fonts CDN is to precede the font import with preconnect. Just adding this line of code can reduce your page load time by 100ms – sweet!
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
Get Bootstrap
Next we need to include the Bootstrap CSS. For tutorial simplicity, we will pull in the CSS from Bootstrap’s hosted CDN. There are many different ways to include Bootstrap in your project. My preferred method is to use a package manager such as NPM. You can explore the various options available to you here.
Include the CSS:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384…" crossorigin="anonymous">
Writing the HTML
To achieve a responsive design, we are going to utilize Bootstrap’s grid system and utilities. This will allow us to define certain behaviors for different screen sizes. To apply a breakpoint to a column for example, you would apply a class prefix such as col-sm or col-lg. I will go through some of the HTML markup to give you an idea of what is going on!
Lets have a look at our main container:
<div class="container-fluid pt-2 pt-md-4 px-md-5">
At first this may look a bit daunting. But it’s fairly straight forward once you get your head around it. It can be translated as follows:
container-fluid : our main container will fill 100% width of the screen
(not a fixed width).pt-2 : apply padding to the top with a size of 2 (sizing runs from 1 to
5).pt-md-4 : for screen size of medium and above, apply padding top of
size 4.px-md-5 : for screen size of medium and above, apply padding to the
sides of size 5.
And this div can be broken down as follows:
<div class="col-md text-center text-md-left mb-3 mb-md-0">
col-md : for screen size of medium and above treat this div as a
column.text-md-left : for screen size of medium and above align the text to
the left.mb-3 : apply margin to the bottom of size 3.
mb-md-0 : for screen size of medium and above do not apply a margin to
the bottom.
Hopefully this brief rundown will give you a basic understanding of what is going on. Of course, you can check out the docs and get a deeper understanding of the Bootstrap grid system and utilities from the official documentation.
Here is the full markup for our invoice template:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Responsive Bootstrap Invoice Template</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Google fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
<!-- Bootstrap CDN -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<!-- Override some Bootstrap CDN styles - normally you should apply these through your Bootstrap variables / sass -->
<style>
body { font-family: "Roboto", serif; font-size: 0.8rem; font-weight: 400; line-height: 1.4; color: #000000; }
h1, h2, h4, h5 { font-weight: 700; color: #000000; }
h1 { font-size: 2rem; }
h2 { font-size: 1.6rem; }
h4 { font-size: 1.2rem; }
h5 { font-size: 1rem; }
.table { color: #000; }
.table td, .table th { border-top: 1px solid #000; }
.table thead th { vertical-align: bottom; border-bottom: 2px solid #000; }
@page {
margin-top: 2.5cm;
margin-bottom: 2.5cm;
}
@page :first {
margin-top: 0;
margin-bottom: 2.5cm;
}
</style>
</head>
<body>
<div style="background-color: #000000; height: 10px;"></div>
<div class="container-fluid pt-2 pt-md-4 px-md-5">
<!-- Invoice heading -->
<table class="table table-borderless">
<tbody>
<tr>
<td class="border-0">
<div class="row">
<div class="col-md text-center text-md-left mb-3 mb-md-0">
<img class="logo img-fluid mb-3" src="https://docamatic.s3-eu-west-1.amazonaws.com/assets/360_logo.png" style="max-height: 140px;"/>
<br>
<h2 class="mb-1">360 Footwear</h2>
787 Brunswick, Los Angeles, CA 50028<br>
support@360footwear.co / 4444 555 555<br>
<strong>360footwear.co</strong>
</div>
<div class="col text-center text-md-right">
<!-- Dont' display Bill To on mobile -->
<span class="d-none d-md-block">
<h1>Billed To</h1>
</span>
<h4 class="mb-0">Casey Williams</h4>
57 Parkway, 5th Floor<br/>
New York, NY 10013<br/>
casey@test.com<br/>
<h5 class="mb-0 mt-3">14th June, 2018</h5>
</div>
</div>
</td>
</tr>
</tbody>
</table>
<!-- Invoice items table -->
<table class="table">
<thead>
<tr>
<th>Summary</th>
<th class="text-right">Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<h5 class="mb-1">Pursuit Running Shoes</h5>
Men's Pursuit Running Shoes - 10/M
</td>
<td class="font-weight-bold align-middle text-right text-nowrap">$149.00 USD</td>
</tr>
<tr>
<td>
<h5 class="mb-1">Shelby Boots</h5>
Men's Shelby Leather Boots - 10/M
</td>
<td class="font-weight-bold align-middle text-right text-nowrap">$99.00 USD</td>
</tr>
<tr>
<td colspan="2" class="text-right border-0 pt-4"><h5>Total: $248.00 USD</h5></td>
</tr>
</table>
<!-- Thank you note -->
<h5 class="text-center pt-2">
Thank you for your custom!
</h5>
</div>
</body>
Here is how our invoice looks rendered as a Letter document:
HTML to PDF
If you need to convert your HTML to PDF or want to make use of ready to go templates in your projects, please check out Docamatic (disclaimer!!! - I am the founder).
You can see the final invoice rendered as a PDF here. The source code can be downloaded from GitHub here.
Happy coding and thanks for reading!
Posted on January 31, 2020
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
