Bootstrap 3 pricing table styled with LESS

In previous LESS tutorials we examined how to work with variables, (parametric) mixins and nesting. This time we’ll put this knowledge into practice by creating a Bootstrap 3 pricing table styled with LESS.

Bootstrap 3 pricing table styled with LESS

To give you a clear picture of what we’re going to do in this tutorial I’ll show you the end result first:
Pricing table with 3 columns in 3 different colors and one column with box shadow

Project setup

We start by creating a project folder that will contain our HTML file with the table, the (necessary) Bootstrap LESS files and the LESS file that we’ll create for the pricing table. When we compile this last file into a CSS file that style sheet will also reside in this project folder.

Download and insert the Bootstrap LESS files into the project folder you just created (see tutorial Working with Bootstrap LESS).

Open Crunch (or your preferred LESS editor) and create a new LESS file called “pricing_table.less”.

Make a copy of the file “bootstrap.less” and call this copy “bootstrap_custom.less”.Insert @import 'pricing_table.less'; into the file “bootstrap_custom.less” (below the @import‘s for the other components).

HTML file with the pricing table

The markup for our pricing table is:

“pricing_table.less”

The file “pricing_table.less” will contain several sections. Below I’ll explain each of those sections:

Variables

When you look at the image of the pricing table (based on a theme by Smaliii) you’ll see that we “need” 3 variables for the colors green, orange and dark grey. Insert the code for these 3 variables into the file “pricing_table.less”:

If you want to you can also make use of existing variable colors like @brand-primary, @brand-success, etc.. For this tutorial I wanted to use newly created variables.

We also set the existing variable @border-radius-base to 0 by inserting @border-radius-base: 0; directly below our 3 color variables.

Other variables we’ll use (@font-size-small, @font-size-large, @line-height-base) are contained in the standard Bootstrap “variables.less” file.

Mixin(s)

As you can see in the image above of the pricing table one column is set off from the rest with a box shadow on the left and on the right of each cell.

To achieve this effect we’ll not add a box shadow to those cells but we need to use an inset box shadow on the cell to the left and on the cell to the right of each cell in that column.

For this we use a parametric mixin with default values (see tutorial Parametric Mixins with default values):

Because we need two almost identical box shadow rules I have created one parametric mixin with a variable name for each default value. Later on in this tutorial you will see how we can use this to our advantage.

Basic Table styling

Our pricing table is based on the styling for a Bootstrap 3 Table but with a few changes. Instead of setting the width to 100% we use a width of 750px. We’ll also use a small font size.

Body section styling

Besides the width of the table we also need to set the width of the (cells in the) four columns:

In the code above we concatenated selectors to their parent selector with the &-combinator (see tutorial: LESS nesting).

Head section

The cells in the head of the table are styled with the use of our color variables:

The code below contains some finishing touches:

  • Eliminating the background in the second and fourth cell.
  • An 8% darkened version of the orange color at the top of the third column.
  • Take out the border between the first and second row of cells in the head section.
If you are not familiar with how to use the :nth-child the following articles will prove interesting:

In this example we use 2n+2 and -n+4. The first – 2n+2 – will select cells 2 (= 2*0+2) and 4 (= 2*1+2). The second – -n+4 – will select cells 4 (= -0+4), 3 (= -1+4), 2 (= -2+4) and 1 (= -3+4).

Save, compile and check

When I write a LESS file I like to check the end result after each section is done. Besides getting the satisfaction of seeing the result I also do this because LESS editors do not give you any warning if you make typing mistakes etc. Only when you compile a LESS file do you get error messages.So what I do is this:

  1. Save the LESS file (e.g. “pricing_table.less)
  2. Crunch/compile the file “bootstrap_custom.less (and save the file “bootstrap_custom.css”; which only needs to be saved the first time
  3. Open the HTML file in a browser and check the result so far; after the first time just leave the file open in the browser and click on “reload” to see the changes

The result so far should look like this:
Pricing table with general and head styling

Box shadow

As already said above we need two almost identical variations of the inset box shadow. With the mixin we can achieve that quite easily. The parametric mixin we created before is used to style all of the fourth cells:

To create the box shadow variation used for all the second cells we only need to change value for the parameter “@x” that holds the horizontal offset:

As you can see we made use of the :nth-of-type here. If you’re not familiar with the difference between the :nth-of-type and the :nth-child I can recommend this article:

Save, compile and check

Get into the habit of doing the 3-step: save, crunch/compile and check the result so far.

Styling the cells with special characters

The fifth, sixth and eight row (of the body section) contain special characters. To style these we make use of the :nth-child again:

In this instance we used n+2 to select the cells 2 (= 0+2), 3 (= 1+2) and 4 (= 2+2).We’re almost there. We only need to style the row with prices and the buttons.

Prices row

The code below used for styling the row with prices uses LESS principles we used before in this tutorial:

Buttons

As the last step we style the buttons at the bottom of each column:

I want to direct your attention to the creation of the mixins “.weight” and “.colr”. As you can see these mixins were added after the rules in which they were used to style the buttons. As you can see in LESS we can define mixins and variables following the style rule sets in which they are used.

Save, compile and check

Save the file “pricing_table.less”. Crunch/compile “bootstrap_custom.less” and check if your pricing table looks the same as the image at the beginning of this tutorial.

Add your comment