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.
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 ...