https://github.com/mdbootstrap/react-timeline

Responsive React Timelines built with Bootstrap 5. Horizontal and vertical timeline examples, interactive timeline, double-sided timeline & more. Easy to customize. https://mdbootstrap.com/docs/react/extended/timeline
https://github.com/mdbootstrap/react-timeline

bootstrap bootstrap-template bootstrap-theme bootstrap5 css html js react template timeline

Last synced: 6 months ago
JSON representation

Host: GitHub
URL: https://github.com/mdbootstrap/react-timeline
Owner: mdbootstrap
License: other
Created: 2022-08-26T11:36:16.000Z (over 3 years ago)
Default Branch: master
Last Pushed: 2022-08-31T09:57:24.000Z (over 3 years ago)
Last Synced: 2025-09-22T18:12:33.835Z (7 months ago)
Topics: bootstrap, bootstrap-template, bootstrap-theme, bootstrap5, css, html, js, react, template, timeline
Language: JavaScript
Homepage:
Size: 279 KB
Stars: 1
Watchers: 4
Forks: 1
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: License.pdf

Awesome Lists containing this project

README

![MDB Logo](https://mdbootstrap.com/img/Marketing/general/logo/medium/mdb-react.png)

# MDB React 5

Responsive React Timelines built with Bootstrap 5. Horizontal and vertical timeline examples, interactive timeline, double-sided timeline & more. Easy to customize.

Check out [React Timeline Documentation](https://mdbootstrap.com/docs/react/extended/timeline) for detailed instructions & even more examples.

## Basic example
![Basic example](https://user-images.githubusercontent.com/108793661/186896362-31b22fba-2f50-41f5-a5ca-ae1ce0f9f448.png)
```js
import React from "react";
import { MDBContainer } from "mdb-react-ui-kit";

export default function App() {
return (

Our company starts its operations

11 March 2020

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit
necessitatibus adipisci, ad alias, voluptate pariatur officia
repellendus repellat inventore fugit perferendis totam dolor
voluptas et corrupti distinctio maxime corporis optio?

First customer

19 March 2020

Quisque ornare dui nibh, sagittis egestas nisi luctus nec. Sed
aliquet laoreet sapien, eget pulvinar lectus maximus vel. Phasellus
suscipit porta mattis.

Our team exceeds 10 people

24 June 2020

Orci varius natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus. Nulla ullamcorper arcu lacus, maximus
facilisis erat pellentesque nec. Duis et dui maximus dui aliquam
convallis. Quisque consectetur purus erat, et ullamcorper sapien
tincidunt vitae.

Earned the first million $!

15 October 2020

Nulla ac tellus convallis, pulvinar nulla ac, fermentum diam. Sed et
urna sit amet massa dapibus tristique non finibus ligula. Nam
pharetra libero nibh, id feugiat tortor rhoncus vitae. Ut suscipit
vulputate mattis.

);
}
```
```css
.timeline {
border-left: 1px solid hsl(0, 0%, 90%);
position: relative;
list-style: none;
}

.timeline .timeline-item {
position: relative;
}

.timeline .timeline-item:after {
position: absolute;
display: block;
top: 0;
}

.timeline .timeline-item:after {
background-color: hsl(0, 0%, 90%);
left: -38px;
border-radius: 50%;
height: 11px;
width: 11px;
content: "";
}
```

## How to use?

1. Download MDB 5 - FREE REACT UI KIT

2. Choose your favourite customized component and click on the image

3. Copy & paste the code into your MDB project

[▶️ Subscribe to YouTube channel for web development tutorials & resources](https://www.youtube.com/MDBootstrap?sub_confirmation=1)

## More examples (click on the image to see a live demo)
### Events timeline with icons:
[![React Timeline #1](https://user-images.githubusercontent.com/108793661/186896680-61fe5a0a-63f2-4113-a99d-b612f3232c0f.png)](https://mdbootstrap.com/docs/react/extended/timeline/#section-events-timeline-with-icons)

### Double-sided timeline:
[![React Timeline #2](https://user-images.githubusercontent.com/108793661/186899284-f278b8f5-a50d-4347-92a2-04c078ae67d9.png)](https://mdbootstrap.com/docs/react/extended/timeline/#section-double-sided)

### Timeline events:
[![React Timeline #3](https://user-images.githubusercontent.com/108793661/186905495-a99c7170-bef6-4c09-a23d-eb7d279971b3.png)](https://mdbootstrap.com/docs/react/extended/timeline/#section-timeline-events)

### Horizontal timeline:
[![React Timeline #4](https://user-images.githubusercontent.com/108793661/186905707-26e320d1-8854-48b2-bb88-cbc2e1abb404.png)](https://mdbootstrap.com/docs/react/extended/timeline/#section-horizontal-timeline)

### Timeline with images:
[![React Timeline #4](https://user-images.githubusercontent.com/108793661/186905867-f54fae7e-b52c-4297-ae9d-efcf8b1ec572.png)](https://mdbootstrap.com/docs/react/extended/timeline/#section-timeline-images)

### Timeline latest news:
[![React Timeline #5](https://user-images.githubusercontent.com/108793661/186905998-e097c588-ad2a-4d7b-8201-00aeb54fc3e8.png)](https://mdbootstrap.com/docs/react/extended/timeline/#section-timeline-latest-news)

You can find other examples [here](https://mdbootstrap.com/docs/react/extended/timeline).

## More extended React documentation