Responsive React Timelines built with Bootstrap 5. Horizontal and vertical timeline examples, interactive timeline, double-sided timeline & more. Easy to customize.
npm install @mdbootstrap/react-timelinejs
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: "";
}
``