Creating attention-grabbing pricing tables

Let's revisit the mockup of how our client would like the pricing tables to look on desktop-sized screens:

Let's see how close we can get to the desired result, and what we can work out for other viewport sizes.

Setting up the variables, files, and markup

As shown in the preceding screenshot, there are a few tables in this design. We can begin by adjusting a few fundamental variables for all tables. These are found in Bootstrap's _variables.scss file. Search for the tables section and adjust the variables for background, accented rows, and borders as desired. I've made these adjustments as shown in the following lines of code, and saved them in the local scss/includes/_variables.scss file:

// Tables 
// 
// Customizes the `.table` component with basic values, each used across all table variations. 
 
$table-cell-padding:            .75rem; 
$table-sm-cell-padding:         .3rem; 
 
$table-bg:                      transparent; 
...