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.
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.
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.
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
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
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 our service to create a project and receive a link. Later you can edit or delete the project
Receive Web Link
After any successful project upload, you will receive a web URL link which can be used to visit or share the website
PageSection