Reader small image

You're reading from  Bootstrap 4 Cookbook

Product typeBook
Published inJun 2017
Reading LevelBeginner
PublisherPackt
ISBN-139781785889295
Edition1st Edition
Languages
Right arrow
Author (1)
Ajdin Imsirovic
Ajdin Imsirovic
author image
Ajdin Imsirovic

Ajdin Imsirovic is a full-stack web developer who has published several courses on the subject of web design and web development. He has also authored three books, Bootstrap 4 Cookbook, Elm Web Development, and Vue.js Quick Start Guide. In his fourth book, Vue CLI 3 Quick Start Guide, he introduces readers to the rich ecosystem of frontend tooling and best practices.
Read more about Ajdin Imsirovic

Right arrow

Styling a pricing section using Bootstrap's default table classes


In this recipe, we will utilize default table-specific Bootstrap classes to achieve several variations on the same HTML structure.

Getting ready

Navigate to the recipe8 page of the chapter 3 website, and preview the final result that we are trying to achieve. To get this look, we will use several Bootstrap 4 classes, as follows:

  • .table-responsive and .table
  • .table-striped, .table-bordered, and .table-hover
  • .table-inverse, .table-warning, .table-info, .table-danger, .table-success, and .table-sm
  • .thead-default and .thead-inverse

The basic HTML structure will be repeated several times, with changes involving the use of various combinations of the aforementioned Bootstrap 4 classes.

How to do it...

  1. Open the empty chapter3/start/app/recipe8.ejs file and add the following code to it:
      <div class="container mt-5">
       <h1>Chapter 3, Recipe 8:</h1>
       <p class="lead mb-5">Style a Price Section Using Bootstrap...
lock icon
The rest of the page is locked
Previous PageNext Chapter
You have been reading a chapter from
Bootstrap 4 Cookbook
Published in: Jun 2017Publisher: PacktISBN-13: 9781785889295

Author (1)

author image
Ajdin Imsirovic

Ajdin Imsirovic is a full-stack web developer who has published several courses on the subject of web design and web development. He has also authored three books, Bootstrap 4 Cookbook, Elm Web Development, and Vue.js Quick Start Guide. In his fourth book, Vue CLI 3 Quick Start Guide, he introduces readers to the rich ecosystem of frontend tooling and best practices.
Read more about Ajdin Imsirovic