Get access to an awe-inspiring collection Of 87 Beautiful Wordpress themes for the price of one Get it now Ad

Published: 8.5.2019 | Last update: 2.7.2019

Build a responsive vertical timeline using Bootstrap 4.

The timeline items contain a title, date and introductory text, but you can easily make it your own with a content based on your needs. All the heavy lifting to make it responsive and looking nice has been done already. 

Please note that this Bootstrap timeline snippet relies on custom classes that you'll need to include in your project to make it work. This snippet uses a CSS-only solution; no additional JavaScript is necessary.

Please note that the interactive editor on this page should be viewed on your laptop or desktop for the best results.

How to use the snippet

There are two ways to use the snippet:

  • a] Copy it into your project. This means:
    1. Copy content of the HTML, CSS, JavaScript tabs into your project
    2. Make sure that you have jQuery 3 and Bootstrap 4's CSS and JS included in your project too.
    3. That should be it, and you should be good to go.
  • b] Use the "Edit in JSFiddle" link in the top right and play with it in the JSFiddle. After adjusting what you need, you can use the same steps as in a] to develop it locally.
Share on Facebook Share on Twitter Share on LinkedIn