O'Reilly logo

Complete Bootstrap: Responsive Web Development with Bootstrap 4 by Ian Whitley, David Cochran, Bass Jobsen, Matt Lambert

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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:

Creating attention-grabbing pricing tables

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

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required