Collection of free custom Bootstrap timeline code examples: horizontal, vertical, etc.

  1. CSS Timelines
  2. ReactJS Timelines
Demo image: Simple Horizontal Timeline

Creator

  • Dey Dey

Programming language

  • HTML / CSS

Information a code

Simple Horizontal Timeline

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies:

Bootstrap version: 4.4.1

Demo image: Timeline Events

Creator

  • Dey Dey

Programming language

  • HTML / CSS

Information a code

Timeline Events

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies:

Bootstrap version: 4.4.1

Demo image: Bootstrap 4 Event Timeline

Creator

  • Dey Dey

Programming language

  • HTML / CSS

Information a code

Bootstrap 4 Event Timeline

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css

Bootstrap version: 4.4.1

Demo image: Bootstrap 4 User Business Timeline with Time

Creator

  • Ask SNB

Programming language

  • HTML / CSS

Information a code

Bootstrap 4 User Business Timeline with Time

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies:

Bootstrap version: 4.3.1

Demo image: Bootstrap 4 Experience Timeline

Creator

  • Dey Dey

Programming language

  • HTML / CSS

Information a code

Bootstrap 4 Experience Timeline

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies:

Bootstrap version: 4.3.1

Demo image: Bootstrap 4 Basic Timeline for Users Without Avatar

Creator

  • BBBootstrap Team

Programming language

  • HTML / CSS

Information a code

Bootstrap 4 Basic Timeline for Users Without Avatar

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies:

Bootstrap version: 4.0.0

Demo image: Timeline

Creator

  • Ondrej

Programming language

  • HTML / CSS

Information a code

Timeline

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.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css

Bootstrap version: 4.3.1

Demo image: Bootstrap 4 Timeline Widget

Creator

  • Dey Dey

Programming language

  • HTML / CSS

Information a code

Bootstrap 4 Timeline Widget

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: line-awesome.css

Bootstrap version: 4.1.1

Demo image: Bootstrap 4 Timeline Color Row

Creator

  • Dey Dey

Programming language

  • HTML / CSS

Information a code

Bootstrap 4 Timeline Color Row

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css

Bootstrap version: 4.1.1

Demo image: Responsive Horizontal Timeline Using Slick

Creator

  • David

Programming language

  • HTML / CSS / JS

Information a code

Responsive Horizontal Timeline Using Bootstrap and Slick

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: slick.css, jquery.js, slick.js

Bootstrap version: 4.4.1

Demo image: Bootstrap 4 Timeline

Creator

  • Dey Dey

Programming language

  • HTML / CSS

Information a code

Bootstrap 4 Timeline

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css

Bootstrap version: 4.1.1

Demo image: Simple Vertical Timeline

Creator

  • mylastof

Programming language

  • HTML / CSS

Information a code

Simple Vertical Timeline

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies:

Bootstrap version: 4.1.1

Demo image: 12 Booststrap Timeline

Creator

  • Siddharth Panchal

Programming language

  • HTML / CSS

Information a code

12 Booststrap Timeline

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css

Bootstrap version: 4.1.1

Demo image: Vertical Left-Right Timeline

Creator

  • mylastof

Programming language

  • HTML / CSS

Information a code

Vertical Left-Right Timeline

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies:

Bootstrap version: 4.1.1

Demo image: Tracking Result Timeline

Creator

  • codesoftlab

Programming language

  • HTML / CSS

Information a code

Tracking Result Timeline

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies:

Bootstrap version: 4.1.1

Creator

  • anmolv886

Programming language

  • HTML / CSS / JS

Information a code

Timeline Scroll

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Bootstrap version: 4.0.0

Demo image: Timeline with Date

Creator

  • latifur

Programming language

  • HTML / CSS

Information a code

Timeline with Date

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies:

Bootstrap version: 4.0.0

Demo image: Colored Timeline

Creator

  • Dey Dey

Programming language

  • HTML / CSS

Information a code

Colored Timeline

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css

Bootstrap version: 3.3.6

Demo image: Tickets Timeline

Creator

  • Dey Dey

Programming language

  • HTML / CSS

Information a code

Tickets Timeline

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css

Bootstrap version: 3.3.4

Demo image: Bootstrap Timeline Style

Creator

  • bestjquery

Programming language

  • HTML / CSS

Information a code

Bootstrap Timeline Style 108

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css

Bootstrap version: 3.3.0

Demo image: Bootstrap Timeline Style

Creator

  • bestjquery

Programming language

  • HTML / CSS

Information a code

Bootstrap Timeline Style 106

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css

Bootstrap version: 3.3.0

Demo image: Bootstrap Timeline Style

Creator

  • bestjquery

Programming language

  • HTML / CSS

Information a code

Bootstrap Timeline Style 98

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css

Bootstrap version: 3.3.0

Demo image: Bootstrap Timeline Style

Creator

  • bestjquery

Programming language

  • HTML / CSS

Information a code

Bootstrap Timeline Style 66

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies:

Bootstrap version: 3.3.0

Demo image: Bootstrap Timeline Style

Creator

  • bestjquery

Programming language

  • HTML / CSS

Information a code

Bootstrap Timeline Style 62

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css

Bootstrap version: 3.3.0

Demo image: Bootstrap Timeline Style

Creator

  • bestjquery

Programming language

  • HTML / CSS

Information a code

Bootstrap Timeline Style 48

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies:

Bootstrap version: 3.3.0

Demo image: Bootstrap Timeline Style

Creator

  • bestjquery

Programming language

  • HTML / CSS

Information a code

Bootstrap Timeline Style 47

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css

Bootstrap version: 3.3.0

Demo image: Bootstrap Timeline Style

Creator

  • bestjquery

Programming language

  • HTML / CSS

Information a code

Bootstrap Timeline Style 44

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css

Bootstrap version: 3.3.0

Demo image: Bootstrap Timeline Style

Creator

  • bestjquery

Programming language

  • HTML / CSS

Information a code

Bootstrap Timeline Style 25

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css

Bootstrap version: 3.3.0

Demo image: Bootstrap Timeline Style

Creator

  • bestjquery

Programming language

  • HTML / CSS

Information a code

Bootstrap Timeline Style 23

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies:

Bootstrap version: 3.3.0

Demo image: Bootstrap Timeline Style

Creator

  • bestjquery

Programming language

  • HTML / CSS

Information a code

Bootstrap Timeline Style 22

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css

Bootstrap version: 3.3.0

Demo image: Bootstrap Timeline Style

Creator

  • bestjquery

Programming language

  • HTML / CSS

Information a code

Bootstrap Timeline Style 18

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies:

Bootstrap version: 3.3.0

Demo image: Timeline with Small Images

Creator

  • Dey Dey

Programming language

  • HTML / CSS

Information a code

Timeline with Small Images

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css

Bootstrap version: 3.2.0