PS PageSection Sign In

Pricing Cards Using Bootstrap 3 & 4 — Bootstrap HTML Templates

author_image
A template from PageSection Templates
Updated 06 September 2022 • Published 17 March 2022

In 2021, we created a collection of editable HTML templates & snippets across popular CSS frameworks including Bootstrap 4 and Bootstrap 3. In this blog post, let us highlight two versions of the same 'pricing card' template powered by two different versions of Bootstrap. Also note that while similar in many aspects (and almost identical), the Bootstrap version 3 and version 4 frameworks have some critical differences. Be sure to check out some documentation.

Pricing card template using Bootstrap 4

We used the free Bootstrap Icons (icons.getbootstrap.com) to create the ticks alongside the card text. The icons are free to use in any project, commercial or otherwise. However, you could also use your own custom icons from other sources e.g. FontAwesome. Also note that the card <div> columns must be inside another <div> with a row class applied. Bootstrap 4 also makes it easy to create card-components by using card and card-body classes.

Pricing card template using Bootstrap 3

We recreated a similar template using Bootstrap 3, but instead used the default Glyphicon Halflings icons which are provided for free within the Bootstrap 3 package. Similar to the structure above, the cards must be inside another <div> with a row class applied. However, for Bootstrap 3, we use do NOT use the card or card-body classes. Instead, consider using the thumbnail and caption classes.

Upload & edit custom HTML templates with PageSection

Sign up for a free account with PageSection, then upload and create custom editable templates for any of HTML website, blog or business. Please note that back-end logic and JavaScript-heavy frameworks are not well supported due to their inconsistencies in HTML structure. Also make sure to include an index.html page in the custom HTML templates you upload.


Get HTML Project

Get HTML project files

This could be a website for a client, or for personal use. Get the necessary project files of the website to upload

Create Zip File

Place the files into a single zip file

Put the website (project) files in a single zipped (.zip) file, include an index.html at the "top" and not within another folder

Upload Zip File

Upload the zip file using your PageSection user account

Upload the zip file using our service to create a project and receive a link. Later you can edit or delete the project

Receive Web Link

Receive a web URL link for every uploaded project

After any successful project upload, you will receive a web URL link which can be used to visit or share the website




For more related content

Visit our blog page