Bootstrap / CSS based coupon code template: 4 demos

The coupon code template by using Bootstrap and CSS

As working for an e-commerce based project, the scenarios will come when you need to present the coupon codes of the products or offers to the visitors. If your project / theme is based on Bootstrap framework then there are a number of light-weight and elegant solutions out there for the layout of coupon codes with printing options.

In this article, I am going to show you a CSS / Bootstrap based coupon code layout solution that does not require any further dependency, since you already included the Bootstrap CSS file. The code is given with each example in the demo page where you can also see the output of the template.

You may change the CSS as per need or to match the design of coupon code layout with the rest of your design.

The first template of Bootstrap / CSS coupon code

In this demo, some dummy text is used for the hosting company coupon code for demonstration only. The information includes the hosting and domain offer, price; where coupon code applies and its expiry date.

Along with it, you may use one big image related to the service or product along with company’s logo at the header. Have a look at the demo online:

Bootstrap CSS coupon

See online demo and code

You have to include the Bootstrap CSS and font-awesome files:

<link rel=”stylesheet” href=”http://netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css”>

 

<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css”>

Place the CSS in your external file or include in the <style> section.

Get the complete code from the demo page where it includes CSS, markup (including Bootstrap code) and required Bootstrap CSS/font-awesome references.

Template 2: The green theme for coupon code

The information is similar to the above template, only the theme is changed to green in this coupon code template.

Bootstrap CSS coupon green

See online demo and code

For the green theme, a few CSS properties are changed and added in the <style> section. For example, the panel body where information is shown, the background color is added:

 

This adds a light green background color.

The panel header color is changed by using the panel-success class in the main div containing .panel class.

<div class=”panel panel-success coupon”>

For the panel footer’s dark green color with orange text, the following properties are added:

 

And

 

Get the complete code on the demo page.

The red theme coupon code template

The following template is designed with the red theme where I used panel-danger class along with changing the colors to different red shades. See the template and code by visiting the links below:

Botstrap coupon Red

See online demo and code

The Orange theme

The same set of information and layout with the orange/yellowish theme. Have a look:

Bootstrap coupon Orange

See online demo and code

Similarly, you may amend the design, text or layout according to the needs and to match the theme of your website.

 

Credit: derekbtw