Create Stunning Invoice HTML Template Bootstrap 5 for Product Quality

Invoice html template bootstrap 5 for Product quality

[Music] thank you hello everyone so in today's video we are going to be discussing how to design a responsive invoice page using HTML CSS bootstrap and JavaScript so here we go we have so this is a invoice.php page so as you can see we have a basic header and our footer in this page and so in this design we have we have a horizontal line dividing that and then we have a print button and I export as PDF button so that again is divided by a line and we have a logo at the tech start or the left end of a program and on our right we have eShop uh address and our details so and then again on our right uh it invoice is written too so that means that's a customer or the recipient so here we'll be having their address and email and we'll be having the invoice name here so this is a tech start because it's on the left full left identify page and on the full right identify page it's a text in so we have uh date and time of invoice and we have that and here we have a table here so we have the invoice number our ID and product our unit price of quantity no uh try a total price so here we have the order number these are this is all in table row values Apple iPhone 12 unit price and the quantity and the total price and again here we have it we have introduced three columns and in the three columns we have can see our subtotal uh uh delivery fee and our grand total and here we have send a thank you so basically our table ends after this point and then after that we have divided uh columns again and here we have a label saying uh notice purchase items can be returned by seven days of delivery only and we have a blue horizontal line dividing and invoice was created on a computer and is valid without a signature and cl so that is it so this is totally the invoice and we can print it and it's a valid invoice so this is it for this video on how we do the user ID so let's move on to the path where we are going to design this on our code so this is a invoice.php code for our program so as you can see here we have the basic HTML tags and here we have a title and CSS files and icons which we need and here we have opened our body class with the margin top of Two and a style color of the whitish color and here we have linkedina header and moving down we uh we will open all of this in a container fluid uh div class and it's all in a row format and now we have a horizontal line here like we saw in our program and our two buttons on the justify on the end of our page right in so that's why we adjust the five content in so we have a print button and Export button the colors are dark and danger for it and we have another line and moving down again we have a invoice header image so that is that and moving down we have a title as a heading tool and then we have our address all other texting so it's basically uh I didn't write ident and again we have another line and moving down we have uh invoice written two and we have our address which is this is all on the left side of our program and here again it's called right right identity again so we have the invoice details date of time on the right and we have a table opening up so basically these are the head values of our table hashtag number hashtag order ID and product and our unit price quantity and price uh I'm moving down these are table values which we have here and here is our table footer which we have in the light gray lines so we have the subtotal and our total and we have a delivery fee and uh that value in the grand total and on the left side of our page so this is this is all done in a this is all done in a column four and on the left side it will say uh thank you and we have a margin top of minus 100 pixels and uh this vertex will be displayed in green color and at the bottom we have a notice for a label so the background color is this and in that notice in our form label it will say purchased items cannot be written on the 7 days or DDP and then we have another horizontal line dividing that and then we have this value displayed this will be at the center of a page because it's text Center and finally we have our programs footer and here we have a bootstrap Javascript file and a personal Javascript file so in our style.css we have our invoice header image so here we have our logo once again and it will be a 80 pixel image and it won't repeat and the size is contained to the size of a screen so 80 pixels and that is it for this video on how to design a responsive in invoice page thank you for watching