-
Registration
Get here on time, it's first come first serve. Be late, get turned away.
-
Opening Ceremony
Get ready for an exciting event, this will kick off in amazing fashion with MOP & Busta Rhymes as an opening show.
-
Main Event
This is where it all goes down. You will compete head to head with your friends and rivals. Get ready!
-
Closing Ceremony
See how is the victor and who are the losers. The big stage is where the winners bask in their own glory.
Timeline
React Bootstrap 5 Timeline
Responsive React Timelines built with Bootstrap 5. Horizontal and vertical timeline examples, interactive timeline, double-sided timeline & more. Easy to customize.
Basic timeline example
Basic example of a responsive vertical timeline, with dates and event names. CSS-only (without JavaScript).
-
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.
import React from "react";
import { MDBContainer } from "mdb-react-ui-kit";
export default function App() {
return (
<MDBContainer className="py-5">
<ul className="timeline">
<li className="timeline-item mb-5">
<h5 className="fw-bold">Our company starts its operations</h5>
<p className="text-muted mb-2 fw-bold">11 March 2020</p>
<p className="text-muted">
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?
</p>
</li>
<li className="timeline-item mb-5">
<h5 className="fw-bold">First customer</h5>
<p className="text-muted mb-2 fw-bold">19 March 2020</p>
<p className="text-muted">
Quisque ornare dui nibh, sagittis egestas nisi luctus nec. Sed
aliquet laoreet sapien, eget pulvinar lectus maximus vel. Phasellus
suscipit porta mattis.
</p>
</li>
<li className="timeline-item mb-5">
<h5 className="fw-bold">Our team exceeds 10 people</h5>
<p className="text-muted mb-2 fw-bold">24 June 2020</p>
<p className="text-muted">
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.
</p>
</li>
<li className="timeline-item mb-5">
<h5 className="fw-bold">Earned the first million $!</h5>
<p className="text-muted mb-2 fw-bold">15 October 2020</p>
<p className="text-muted">
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.
</p>
</li>
</ul>
</MDBContainer>
);
}
.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: "";
}
Events timeline with icons
A simple bootstrap timeline with slick icons.
import React from "react";
import { MDBContainer, MDBIcon } from "mdb-react-ui-kit";
export default function App() {
return (
<MDBContainer className="py-5">
<ul className="timeline-with-icons">
<li className="timeline-item mb-5">
<span className="timeline-icon">
<MDBIcon fas icon="rocket" color="primary" size="sm" />
</span>
<h5 className="fw-bold">Our company starts its operations</h5>
<p className="text-muted mb-2 fw-bold">11 March 2020</p>
<p className="text-muted">
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?
</p>
</li>
<li className="timeline-item mb-5">
<span className="timeline-icon">
<MDBIcon fas icon="hand-holding-usd" color="primary" size="sm" />
</span>
<h5 className="fw-bold">First customer</h5>
<p className="text-muted mb-2 fw-bold">19 March 2020</p>
<p className="text-muted">
Quisque ornare dui nibh, sagittis egestas nisi luctus nec. Sed
aliquet laoreet sapien, eget pulvinar lectus maximus vel. Phasellus
suscipit porta mattis.
</p>
</li>
<li className="timeline-item mb-5">
<span className="timeline-icon">
<MDBIcon fas icon="users" color="primary" size="sm" />
</span>
<h5 className="fw-bold">Our team exceeds 10 people</h5>
<p className="text-muted mb-2 fw-bold">24 June 2020</p>
<p className="text-muted">
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.
</p>
</li>
<li className="timeline-item mb-5">
<span className="timeline-icon">
<MDBIcon fas icon="money-bill-wave" color="primary" size="sm" />
</span>
<h5 className="fw-bold">Earned the first million $!</h5>
<p className="text-muted mb-2 fw-bold">15 October 2020</p>
<p className="text-muted">
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.
</p>
</li>
</ul>
</MDBContainer>
);
}
.timeline-with-icons {
border-left: 1px solid hsl(0, 0%, 90%);
position: relative;
list-style: none;
}
.timeline-with-icons .timeline-item {
position: relative;
}
.timeline-with-icons .timeline-item:after {
position: absolute;
display: block;
top: 0;
}
.timeline-with-icons .timeline-icon {
position: absolute;
left: -48px;
background-color: hsl(217, 88.2%, 90%);
color: hsl(217, 88.8%, 35.1%);
border-radius: 50%;
height: 31px;
width: 31px;
display: flex;
align-items: center;
justify-content: center;
}
Double-sided timeline
Event timeline template with chronologically sorted events on the left and right sides of the timeline.
2017
Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.
2016
Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.
2015
Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.
2012
Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.
2011
Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.
2007
Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.
import React from "react";
import { MDBCard, MDBCardBody, MDBContainer } from "mdb-react-ui-kit";
export default function App() {
return (
<MDBContainer fluid className="py-5" style={{ backgroundColor: "#F0F2F5" }}>
<div className="main-timeline">
<div className="timeline left">
<MDBCard>
<MDBCardBody className="p-4">
<h3>2017</h3>
<p className="mb-0">
Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec
admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea
quis iuvaret expetendis his, te elit voluptua dignissim per,
habeo iusto primis ea eam.
</p>
</MDBCardBody>
</MDBCard>
</div>
<div className="timeline right">
<MDBCard>
<MDBCardBody className="p-4">
<h3>2016</h3>
<p className="mb-0">
Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec
admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea
quis iuvaret expetendis his, te elit voluptua dignissim per,
habeo iusto primis ea eam.
</p>
</MDBCardBody>
</MDBCard>
</div>
<div className="timeline left">
<MDBCard>
<MDBCardBody className="p-4">
<h3>2015</h3>
<p className="mb-0">
Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec
admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea
quis iuvaret expetendis his, te elit voluptua dignissim per,
habeo iusto primis ea eam.
</p>
</MDBCardBody>
</MDBCard>
</div>
<div className="timeline right">
<MDBCard>
<MDBCardBody className="p-4">
<h3>2012</h3>
<p className="mb-0">
Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec
admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea
quis iuvaret expetendis his, te elit voluptua dignissim per,
habeo iusto primis ea eam.
</p>
</MDBCardBody>
</MDBCard>
</div>
<div className="timeline left">
<MDBCard>
<MDBCardBody className="p-4">
<h3>2011</h3>
<p className="mb-0">
Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec
admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea
quis iuvaret expetendis his, te elit voluptua dignissim per,
habeo iusto primis ea eam.
</p>
</MDBCardBody>
</MDBCard>
</div>
<div className="timeline right">
<MDBCard>
<MDBCardBody className="p-4">
<h3>2007</h3>
<p className="mb-0">
Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec
admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea
quis iuvaret expetendis his, te elit voluptua dignissim per,
habeo iusto primis ea eam.
</p>
</MDBCardBody>
</MDBCard>
</div>
</div>
</MDBContainer>
);
}
/* The actual timeline (the vertical ruler) */
.main-timeline {
position: relative;
}
/* The actual timeline (the vertical ruler) */
.main-timeline::after {
content: "";
position: absolute;
width: 6px;
background-color: #939597;
top: 0;
bottom: 0;
left: 50%;
margin-left: -3px;
}
/* Container around content */
.timeline {
position: relative;
background-color: inherit;
width: 50%;
}
/* The circles on the timeline */
.timeline::after {
content: "";
position: absolute;
width: 25px;
height: 25px;
right: -13px;
background-color: #939597;
border: 5px solid #f5df4d;
top: 15px;
border-radius: 50%;
z-index: 1;
}
/* Place the container to the left */
.left {
padding: 0px 40px 20px 0px;
left: 0;
}
/* Place the container to the right */
.right {
padding: 0px 0px 20px 40px;
left: 50%;
}
/* Add arrows to the left container (pointing right) */
.left::before {
content: " ";
position: absolute;
top: 18px;
z-index: 1;
right: 30px;
border: medium solid white;
border-width: 10px 0 10px 10px;
border-color: transparent transparent transparent white;
}
/* Add arrows to the right container (pointing left) */
.right::before {
content: " ";
position: absolute;
top: 18px;
z-index: 1;
left: 30px;
border: medium solid white;
border-width: 10px 10px 10px 0;
border-color: transparent white transparent transparent;
}
/* Fix the circle for containers on the right side */
.right::after {
left: -12px;
}
/* Media queries - Responsive timeline on screens less than 600px wide */
@media screen and (max-width: 600px) {
/* Place the timelime to the left */
.main-timeline::after {
left: 31px;
}
/* Full-width containers */
.timeline {
width: 100%;
padding-left: 70px;
padding-right: 25px;
}
/* Make sure that all arrows are pointing leftwards */
.timeline::before {
left: 60px;
border: medium solid white;
border-width: 10px 10px 10px 0;
border-color: transparent white transparent transparent;
}
/* Make sure all circles are at the same spot */
.left::after,
.right::after {
left: 18px;
}
.left::before {
right: auto;
}
/* Make all right containers behave like the left ones */
.right {
left: 0%;
}
}
Timeline events
Timeline events panel with specific hours.
import React from "react";
import { MDBCol, MDBContainer, MDBRow } from "mdb-react-ui-kit";
export default function App() {
return (
<MDBContainer className="py-5">
<MDBRow>
<MDBCol md="12">
<div id="content">
<ul className="timeline-1 text-black">
<li className="event" data-date="12:30 - 1:00pm">
<h4 className="mb-3">Registration</h4>
<p>
Get here on time, it's first come first serve. Be late, get
turned away.
</p>
</li>
<li className="event" data-date="2:30 - 4:00pm">
<h4 className="mb-3 pt-3">Opening Ceremony</h4>
<p>
Get ready for an exciting event, this will kick off in amazing
fashion with MOP & Busta Rhymes as an opening show.
</p>
</li>
<li className="event" data-date="5:00 - 8:00pm">
<h4 className="mb-3 pt-3">Main Event</h4>
<p>
This is where it all goes down. You will compete head to head
with your friends and rivals. Get ready!
</p>
</li>
<li className="event" data-date="8:30 - 9:30pm">
<h4 className="mb-3 pt-3">Closing Ceremony</h4>
<p className="mb-0">
See how is the victor and who are the losers. The big stage is
where the winners bask in their own glory.
</p>
</li>
</ul>
</div>
</MDBCol>
</MDBRow>
</MDBContainer>
);
}
.timeline-1 {
border-left: 3px solid #b565a7;
border-bottom-right-radius: 4px;
border-top-right-radius: 4px;
background: rgba(177, 99, 163, 0.09);
margin: 0 auto;
position: relative;
padding: 50px;
list-style: none;
text-align: left;
max-width: 40%;
}
@media (max-width: 767px) {
.timeline-1 {
max-width: 98%;
padding: 25px;
}
}
.timeline-1 .event {
border-bottom: 1px dashed #000;
padding-bottom: 25px;
margin-bottom: 25px;
position: relative;
}
@media (max-width: 767px) {
.timeline-1 .event {
padding-top: 30px;
}
}
.timeline-1 .event:last-of-type {
padding-bottom: 0;
margin-bottom: 0;
border: none;
}
.timeline-1 .event:before,
.timeline-1 .event:after {
position: absolute;
display: block;
top: 0;
}
.timeline-1 .event:before {
left: -207px;
content: attr(data-date);
text-align: right;
font-weight: 100;
font-size: 0.9em;
min-width: 120px;
}
@media (max-width: 767px) {
.timeline-1 .event:before {
left: 0px;
text-align: left;
}
}
.timeline-1 .event:after {
-webkit-box-shadow: 0 0 0 3px #b565a7;
box-shadow: 0 0 0 3px #b565a7;
left: -55.8px;
background: #fff;
border-radius: 50%;
height: 9px;
width: 9px;
content: "";
top: 5px;
}
@media (max-width: 767px) {
.timeline-1 .event:after {
left: -31.8px;
}
}
Horizontal timeline
A responsive template for a horizontal Bootstrap 5 timeline.
-
2 June
Event One
It will be as simple as occidental in fact it will be Occidental Cambridge friend
-
5 June
Event Two
Everyone realizes why a new common language one could refuse translators.
-
7 June
Event Three
If several languages coalesce the grammar of the resulting simple and regular
-
8 June
Event Four
Languages only differ in their pronunciation and their most common words.
import React from "react";
import {
MDBBtn,
MDBCol,
MDBContainer,
MDBRow,
MDBTypography,
} from "mdb-react-ui-kit";
export default function App() {
return (
<MDBContainer fluid className="py-5">
<MDBRow>
<MDBCol lg="12">
<div className="horizontal-timeline">
<MDBTypography listInLine className="items">
<li className="items-list">
<div className="px-4">
<div className="event-date badge bg-info">2 June</div>
<h5 className="pt-2">Event One</h5>
<p className="text-muted">
It will be as simple as occidental in fact it will be
Occidental Cambridge friend
</p>
<div>
<MDBBtn href="#!" size="sm">
Read more
</MDBBtn>
</div>
</div>
</li>
<li className="items-list">
<div className="px-4">
<div className="event-date badge bg-success">5 June</div>
<h5 className="pt-2">Event Two</h5>
<p className="text-muted">
Everyone realizes why a new common language one could refuse
translators.
</p>
<div>
<MDBBtn href="#!" size="sm">
Read more
</MDBBtn>
</div>
</div>
</li>
<li className="items-list">
<div className="px-4">
<div className="event-date badge bg-danger">7 June</div>
<h5 className="pt-2">Event Three</h5>
<p className="text-muted">
If several languages coalesce the grammar of the resulting
simple and regular
</p>
<div>
<MDBBtn href="#!" size="sm">
Read more
</MDBBtn>
</div>
</div>
</li>
<li className="items-list">
<div className="px-4">
<div className="event-date badge bg-warning">8 June</div>
<h5 className="pt-2">Event Four</h5>
<p className="text-muted">
Languages only differ in their pronunciation and their most
common words.
</p>
<div>
<MDBBtn href="#!" size="sm">
Read more
</MDBBtn>
</div>
</div>
</li>
</MDBTypography>
</div>
</MDBCol>
</MDBRow>
</MDBContainer>
);
}
.horizontal-timeline .items {
border-top: 3px solid #e9ecef;
}
.horizontal-timeline .items .items-list {
display: block;
position: relative;
text-align: center;
padding-top: 70px;
margin-right: 0;
}
.horizontal-timeline .items .items-list:before {
content: "";
position: absolute;
height: 36px;
border-right: 2px dashed #dee2e6;
top: 0;
}
.horizontal-timeline .items .items-list .event-date {
position: absolute;
top: 36px;
left: 0;
right: 0;
width: 75px;
margin: 0 auto;
font-size: 0.9rem;
padding-top: 8px;
}
@media (min-width: 1140px) {
.horizontal-timeline .items .items-list {
display: inline-block;
width: 24%;
padding-top: 45px;
}
.horizontal-timeline .items .items-list .event-date {
top: -40px;
}
}
Timeline with images
A vertical timeline with image cards with dates and descriptions.
.webp)
Ut enim ad minim veniam
2017
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
.webp)
Duis aute irure dolor
2016
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
.webp)
Sed ut nihil unde omnis
2015
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
.webp)
Quis autem vel eum voluptate
2014
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
.webp)
Mussum ipsum cacilds
2013
Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
import React from "react";
import {
MDBCard,
MDBCardBody,
MDBCardImage,
MDBContainer,
MDBIcon,
} from "mdb-react-ui-kit";
export default function App() {
return (
<MDBContainer fluid className="py-5" style={{ backgroundColor: "#F0F2F5" }}>
<div className="main-timeline-2">
<div className="timeline-2 left-2">
<MDBCard>
<MDBCardImage
src="https://mdbcdn.b-cdn.net/img/Photos/Slides/img%20(135).webp"
alt="Responsive image"
position="top"
/>
<MDBCardBody className="p-4">
<h4 className="fw-bold mb-4">Ut enim ad minim veniam</h4>
<p className="text-muted mb-4">
<MDBIcon far icon="clock" /> 2017
</p>
<p className="mb-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
</p>
</MDBCardBody>
</MDBCard>
</div>
<div className="timeline-2 right-2">
<MDBCard>
<MDBCardImage
src="https://mdbcdn.b-cdn.net/img/Photos/Slides/img%20(129).webp"
alt="Responsive image"
position="top"
/>
<MDBCardBody className="p-4">
<h4 className="fw-bold mb-4">Duis aute irure dolor</h4>
<p className="text-muted mb-4">
<MDBIcon far icon="clock" /> 2016
</p>
<p className="mb-0">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
quae ab illo inventore veritatis et quasi architecto beatae
vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
voluptas sit aspernatur aut odit aut fugit, sed quia
consequuntur magni dolores eos qui ratione voluptatem sequi
nesciunt.
</p>
</MDBCardBody>
</MDBCard>
</div>
<div className="timeline-2 left-2">
<MDBCard>
<MDBCardImage
src="https://mdbcdn.b-cdn.net/img/Photos/Slides/img%20(131).webp"
alt="Responsive image"
position="top"
/>
<MDBCardBody className="p-4">
<h4 className="fw-bold mb-4">Sed ut nihil unde omnis</h4>
<p className="text-muted mb-4">
<MDBIcon far icon="clock" /> 2015
</p>
<p className="mb-0">
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,
consectetur, adipisci velit, sed quia non numquam eius modi
tempora incidunt ut labore et dolore magnam aliquam quaerat
voluptatem. Ut enim ad minima veniam, quis nostrum
exercitationem ullam corporis suscipit laboriosam, nisi ut
aliquid ex ea commodi consequatur? Quis autem vel eum iure
reprehenderit qui in ea voluptate velit esse quam nihil
molestiae consequatur, vel illum qui dolorem eum fugiat quo
voluptas nulla pariatur?
</p>
</MDBCardBody>
</MDBCard>
</div>
<div className="timeline-2 right-2">
<MDBCard>
<MDBCardImage
src="https://mdbcdn.b-cdn.net/img/Photos/Slides/img%20(125).webp"
alt="Responsive image"
position="top"
/>
<MDBCardBody className="p-4">
<h4 className="fw-bold mb-4">Quis autem vel eum voluptate</h4>
<p className="text-muted mb-4">
<MDBIcon far icon="clock" /> 2014
</p>
<p className="mb-0">
At vero eos et accusamus et iusto odio dignissimos ducimus qui
blanditiis praesentium voluptatum deleniti atque corrupti quos
dolores et quas molestias excepturi sint occaecati cupiditate
non provident, similique sunt in culpa qui officia deserunt
mollitia animi, id est laborum et dolorum fuga. Et harum quidem
rerum facilis est et expedita distinctio.
</p>
</MDBCardBody>
</MDBCard>
</div>
<div className="timeline-2 left-2">
<MDBCard>
<MDBCardImage
src="https://mdbcdn.b-cdn.net/img/Photos/Slides/img%20(144).webp"
alt="Responsive image"
position="top"
/>
<MDBCardBody className="p-4">
<h4 className="fw-bold mb-4">Mussum ipsum cacilds</h4>
<p className="text-muted mb-4">
<MDBIcon far icon="clock" /> 2013
</p>
<p className="mb-0">
Temporibus autem quibusdam et aut officiis debitis aut rerum
necessitatibus saepe eveniet ut et voluptates repudiandae sint
et molestiae non recusandae. Itaque earum rerum hic tenetur a
sapiente delectus, ut aut reiciendis voluptatibus maiores alias
consequatur aut perferendis doloribus asperiores repellat.
</p>
</MDBCardBody>
</MDBCard>
</div>
</div>
</MDBContainer>
);
}
/* The actual timeline (the vertical ruler) */
.main-timeline-2 {
position: relative;
}
/* The actual timeline (the vertical ruler) */
.main-timeline-2::after {
content: "";
position: absolute;
width: 3px;
background-color: #26c6da;
top: 0;
bottom: 0;
left: 50%;
margin-left: -3px;
}
/* Container around content */
.timeline-2 {
position: relative;
background-color: inherit;
width: 50%;
}
/* The circles on the timeline */
.timeline-2::after {
content: "";
position: absolute;
width: 25px;
height: 25px;
right: -11px;
background-color: #26c6da;
top: 15px;
border-radius: 50%;
z-index: 1;
}
/* Place the container to the left */
.left-2 {
padding: 0px 40px 20px 0px;
left: 0;
}
/* Place the container to the right */
.right-2 {
padding: 0px 0px 20px 40px;
left: 50%;
}
/* Add arrows to the left container (pointing right) */
.left-2::before {
content: " ";
position: absolute;
top: 18px;
z-index: 1;
right: 30px;
border: medium solid white;
border-width: 10px 0 10px 10px;
border-color: transparent transparent transparent white;
}
/* Add arrows to the right container (pointing left) */
.right-2::before {
content: " ";
position: absolute;
top: 18px;
z-index: 1;
left: 30px;
border: medium solid white;
border-width: 10px 10px 10px 0;
border-color: transparent white transparent transparent;
}
/* Fix the circle for containers on the right side */
.right-2::after {
left: -14px;
}
/* Media queries - Responsive timeline on screens less than 600px wide */
@media screen and (max-width: 600px) {
/* Place the timelime to the left */
.main-timeline-2::after {
left: 31px;
}
/* Full-width containers */
.timeline-2 {
width: 100%;
padding-left: 70px;
padding-right: 25px;
}
/* Make sure that all arrows are pointing leftwards */
.timeline-2::before {
left: 60px;
border: medium solid white;
border-width: 10px 10px 10px 0;
border-color: transparent white transparent transparent;
}
/* Make sure all circles are at the same spot */
.left-2::after,
.right-2::after {
left: 18px;
}
.left-2::before {
right: auto;
}
/* Make all right containers behave like the left ones */
.right-2 {
left: 0%;
}
}
Timeline latest news
A simple news timeline.
Latest News
-
New Web Design
21 March, 2014
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque scelerisque diam non nisi semper, et elementum lorem ornare. Maecenas placerat facilisis mollis. Duis sagittis ligula in sodales vehicula....
-
21 000 Job Seekers
4 March, 2014
Curabitur purus sem, malesuada eu luctus eget, suscipit sed turpis. Nam pellentesque felis vitae justo accumsan, sed semper nisi sollicitudin...
-
Awesome Employers
1 April, 2014
Fusce ullamcorper ligula sit amet quam accumsan aliquet. Sed nulla odio, tincidunt vitae nunc vitae, mollis pharetra velit. Sed nec tempor nibh...
import React from "react";
import { MDBCol, MDBContainer, MDBRow } from "mdb-react-ui-kit";
export default function App() {
return (
<MDBContainer className="py-5">
<MDBRow>
<MDBCol md="6" offsetMd="3">
<h4 style={{ marginLeft: "1.2rem" }}>Latest News</h4>
<ul className="timeline-3">
<li>
<a href="#!">New Web Design</a>
<a href="#!" className="float-end">
21 March, 2014
</a>
<p className="mt-2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque
scelerisque diam non nisi semper, et elementum lorem ornare.
Maecenas placerat facilisis mollis. Duis sagittis ligula in
sodales vehicula....
</p>
</li>
<li>
<a href="#!">21 000 Job Seekers</a>
<a href="#!" className="float-end">
4 March, 2014
</a>
<p className="mt-2">
Curabitur purus sem, malesuada eu luctus eget, suscipit sed
turpis. Nam pellentesque felis vitae justo accumsan, sed semper
nisi sollicitudin...
</p>
</li>
<li>
<a href="#!">Awesome Employers</a>
<a href="#!" className="float-end">
1 April, 2014
</a>
<p className="mt-2">
Fusce ullamcorper ligula sit amet quam accumsan aliquet. Sed
nulla odio, tincidunt vitae nunc vitae, mollis pharetra velit.
Sed nec tempor nibh...
</p>
</li>
</ul>
</MDBCol>
</MDBRow>
</MDBContainer>
);
}
ul.timeline-3 {
list-style-type: none;
position: relative;
}
ul.timeline-3:before {
content: " ";
background: #d4d9df;
display: inline-block;
position: absolute;
left: 29px;
width: 2px;
height: 100%;
z-index: 400;
}
ul.timeline-3 > li {
margin: 20px 0;
padding-left: 20px;
}
ul.timeline-3 > li:before {
content: " ";
background: white;
display: inline-block;
position: absolute;
border-radius: 50%;
border: 3px solid #22c0e8;
left: 20px;
width: 20px;
height: 20px;
z-index: 400;
}
Timeline gradient cards
Vertical timeline with gradient cards.
7:45PM
May 21
Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.
New
Admin
8:00 AM
May 18
Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.
New
Admin
7:25 PM
May 6
Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.
New
Admin
3:55 PM
Apr 26
Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.
New
Admin
5:24 PM
Apr 12
Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.
New
Admin
11:25 AM
Apr 11
Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.
New
Admin
12:30 PM
Apr 5
Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.
New
Admin
import React from "react";
import {
MDBBadge,
MDBCard,
MDBCardBody,
MDBContainer,
MDBIcon,
} from "mdb-react-ui-kit";
export default function App() {
return (
<MDBContainer className="py-5">
<div className="main-timeline-4 text-white">
<div className="timeline-4 left-4">
<MDBCard className="gradient-custom">
<MDBCardBody className="p-4">
<MDBIcon fas icon="brain" size="2x" className="mb-3" />
<h4>7:45PM</h4>
<p className="small text-white-50 mb-4">May 21</p>
<p>
Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec
admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea
quis iuvaret expetendis his, te elit voluptua dignissim per,
habeo iusto primis ea eam.
</p>
<MDBBadge className="text-black mb-0 me-1" color="light">
New
</MDBBadge>
<MDBBadge className="text-black mb-0" color="light">
Admin
</MDBBadge>
</MDBCardBody>
</MDBCard>
</div>
<div className="timeline-4 right-4">
<MDBCard className="gradient-custom-4">
<MDBCardBody className="p-4">
<MDBIcon fas icon="camera" size="2x" className="mb-3" />
<h4>8:00 AM</h4>
<p className="small text-white-50 mb-4">May 18</p>
<p>
Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec
admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea
quis iuvaret expetendis his, te elit voluptua dignissim per,
habeo iusto primis ea eam.
</p>
<MDBBadge className="text-black mb-0 me-1" color="light">
New
</MDBBadge>
<MDBBadge className="text-black mb-0" color="light">
Admin
</MDBBadge>
</MDBCardBody>
</MDBCard>
</div>
<div className="timeline-4 left-4">
<MDBCard className="gradient-custom">
<MDBCardBody className="p-4">
<MDBIcon fas icon="campground" size="2x" className="mb-3" />
<h4>7:25 PM</h4>
<p className="small text-white-50 mb-4">May 6</p>
<p>
Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec
admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea
quis iuvaret expetendis his, te elit voluptua dignissim per,
habeo iusto primis ea eam.
</p>
<MDBBadge className="text-black mb-0 me-1" color="light">
New
</MDBBadge>
<MDBBadge className="text-black mb-0" color="light">
Admin
</MDBBadge>
</MDBCardBody>
</MDBCard>
</div>
<div className="timeline-4 right-4">
<MDBCard className="gradient-custom-4">
<MDBCardBody className="p-4">
<MDBIcon fas icon="sun" size="2x" className="mb-3" />
<h4>3:55 PM</h4>
<p className="small text-white-50 mb-4">Apr 26</p>
<p>
Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec
admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea
quis iuvaret expetendis his, te elit voluptua dignissim per,
habeo iusto primis ea eam.
</p>
<MDBBadge className="text-black mb-0 me-1" color="light">
New
</MDBBadge>
<MDBBadge className="text-black mb-0" color="light">
Admin
</MDBBadge>
</MDBCardBody>
</MDBCard>
</div>
<div className="timeline-4 left-4">
<MDBCard className="gradient-custom">
<MDBCardBody className="p-4">
<MDBIcon fas icon="palette" size="2x" className="mb-3" />
<h4>5:24 PM</h4>
<p className="small text-white-50 mb-4">Apr 12</p>
<p>
Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec
admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea
quis iuvaret expetendis his, te elit voluptua dignissim per,
habeo iusto primis ea eam.
</p>
<MDBBadge className="text-black mb-0 me-1" color="light">
New
</MDBBadge>
<MDBBadge className="text-black mb-0" color="light">
Admin
</MDBBadge>
</MDBCardBody>
</MDBCard>
</div>
<div className="timeline-4 right-4">
<MDBCard className="gradient-custom-4">
<MDBCardBody className="p-4">
<MDBIcon fas icon="laugh-beam" size="2x" className="mb-3" />
<h4>11:25 AM</h4>
<p className="small text-white-50 mb-4">Apr 11</p>
<p>
Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec
admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea
quis iuvaret expetendis his, te elit voluptua dignissim per,
habeo iusto primis ea eam.
</p>
<MDBBadge className="text-black mb-0 me-1" color="light">
New
</MDBBadge>
<MDBBadge className="text-black mb-0" color="light">
Admin
</MDBBadge>
</MDBCardBody>
</MDBCard>
</div>
<div className="timeline-4 left-4">
<MDBCard className="gradient-custom">
<MDBCardBody className="p-4">
<MDBIcon fas icon="pizza-slice" size="2x" className="mb-3" />
<h4>12:30 PM</h4>
<p className="small text-white-50 mb-4">Apr 5</p>
<p>
Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec
admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea
quis iuvaret expetendis his, te elit voluptua dignissim per,
habeo iusto primis ea eam.
</p>
<MDBBadge className="text-black mb-0 me-1" color="light">
New
</MDBBadge>
<MDBBadge className="text-black mb-0" color="light">
Admin
</MDBBadge>
</MDBCardBody>
</MDBCard>
</div>
</div>
</MDBContainer>
);
}
/* The actual timeline (the vertical ruler) */
.main-timeline-4 {
position: relative;
}
/* The actual timeline (the vertical ruler) */
.main-timeline-4::after {
content: "";
position: absolute;
width: 3px;
background-color: #bbb;
top: 0;
bottom: 0;
left: 50%;
margin-left: -3px;
}
/* Container around content */
.timeline-4 {
position: relative;
background-color: inherit;
width: 50%;
}
/* The circles on the timeline */
.timeline-4::after {
content: "";
position: absolute;
width: 25px;
height: 25px;
right: -11px;
background-color: #bbb;
top: 15px;
border-radius: 50%;
z-index: 1;
}
/* Place the container to the left */
.left-4 {
padding: 0px 40px 20px 0px;
left: 0;
}
/* Place the container to the right */
.right-4 {
padding: 0px 0px 20px 40px;
left: 50%;
}
/* Add arrows to the left container (pointing right) */
.left-4::before {
content: " ";
position: absolute;
top: 18px;
z-index: 1;
right: 30px;
border: medium solid rgba(37, 117, 252, 1);
border-width: 10px 0 10px 10px;
border-color: transparent transparent transparent rgba(37, 117, 252, 1);
}
/* Add arrows to the right container (pointing left) */
.right-4::before {
content: " ";
position: absolute;
top: 18px;
z-index: 1;
left: 30px;
border: medium solid rgba(245, 87, 108, 1);
border-width: 10px 10px 10px 0;
border-color: transparent rgba(245, 87, 108, 1) transparent transparent;
}
/* Fix the circle for containers on the right side */
.right-4::after {
left: -14px;
}
/* Media queries - Responsive timeline on screens less than 600px wide */
@media screen and (max-width: 600px) {
/* Place the timelime to the left */
.main-timeline-4::after {
left: 31px;
}
/* Full-width containers */
.timeline-4 {
width: 100%;
padding-left: 70px;
padding-right: 25px;
}
/* Make sure that all arrows are pointing leftwards */
.timeline-4::before {
left: 60px;
border: medium solid white;
border-width: 10px 10px 10px 0;
border-color: transparent white transparent transparent;
}
/* Make sure all circles are at the same spot */
.left-4::after,
.right-4::after {
left: 18px;
}
.left-4::before {
right: auto;
}
/* Make all right containers behave like the left ones */
.right-4 {
left: 0%;
}
}
.gradient-custom {
/* fallback for old browsers */
background: #6a11cb;
/* Chrome 10-25, Safari 5.1-6 */
background: -webkit-linear-gradient(
to right,
rgba(106, 17, 203, 1),
rgba(37, 117, 252, 1)
);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
background: linear-gradient(
to right,
rgba(106, 17, 203, 1),
rgba(37, 117, 252, 1)
);
}
.gradient-custom-4 {
/* fallback for old browsers */
background: #f093fb;
/* Chrome 10-25, Safari 5.1-6 */
background: -webkit-linear-gradient(
to left,
rgba(240, 147, 251, 1),
rgba(245, 87, 108, 1)
);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
background: linear-gradient(
to left,
rgba(240, 147, 251, 1),
rgba(245, 87, 108, 1)
);
}
Timeline gradient background
A light vertical timeline on a gradient background.
Title of section 1
21 March, 2020Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque scelerisque diam non nisi semper, et elementum lorem ornare. Maecenas placerat facilisis mollis. Duis sagittis ligula in sodales vehicula....
Title of section 2
5 April, 2020Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque scelerisque diam non nisi semper.
Libero expedita explicabo eius fugiat quia aspernatur autem laudantium error architecto recusandae natus sapiente sit nam eaque, consectetur porro molestiae ipsam! Deleniti.
Title of section 3
18 August, 2020Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque scelerisque diam non nisi semper, et elementum lorem ornare. Maecenas placerat facilisis mollis. Duis sagittis ligula in sodales vehicula....
Title of section 4
10 October, 2020Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque scelerisque diam non nisi semper, et elementum lorem ornare. Maecenas placerat facilisis mollis. Duis sagittis ligula in sodales vehicula....
Voluptatibus temporibus esse illum eum aspernatur, fugiat suscipit natus! Eum corporis illum nihil officiis tempore. Excepturi illo natus libero sit doloremque, laborum molestias rerum pariatur quam ipsam necessitatibus incidunt, explicabo.
import React from "react";
import { MDBCard, MDBCardBody, MDBContainer, MDBIcon } from "mdb-react-ui-kit";
export default function App() {
return (
<MDBContainer fluid className="py-5 gradient-custom-5">
<div className="main-timeline-5">
<div className="timeline-5 right-5">
<MDBCard>
<MDBCardBody className="p-4">
<h5>Title of section 1</h5>
<span className="small text-muted">
<MDBIcon fas icon="clock" className="me-1" />
21 March, 2020
</span>
<p className="mt-2 mb-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque
scelerisque diam non nisi semper, et elementum lorem ornare.
Maecenas placerat facilisis mollis. Duis sagittis ligula in
sodales vehicula....
</p>
</MDBCardBody>
</MDBCard>
</div>
<div className="timeline-5 right-5">
<MDBCard>
<MDBCardBody className="p-4">
<h5>Title of section 2</h5>
<span className="small text-muted">
<MDBIcon fas icon="clock" className="me-1" />5 April, 2020
</span>
<p className="mt-2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque
scelerisque diam non nisi semper.
</p>
<p className="mb-0">
Libero expedita explicabo eius fugiat quia aspernatur autem
laudantium error architecto recusandae natus sapiente sit nam
eaque, consectetur porro molestiae ipsam! Deleniti.
</p>
</MDBCardBody>
</MDBCard>
</div>
<div className="timeline-5 right-5">
<MDBCard>
<MDBCardBody className="p-4">
<h5>Title of section 3</h5>
<span className="small text-muted">
<MDBIcon fas icon="clock" className="me-1" />
18 August, 2020
</span>
<p className="mt-2 mb-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque
scelerisque diam non nisi semper, et elementum lorem ornare.
Maecenas placerat facilisis mollis. Duis sagittis ligula in
sodales vehicula....
</p>
</MDBCardBody>
</MDBCard>
</div>
<div className="timeline-5 right-5">
<MDBCard>
<MDBCardBody className="p-4">
<h5>Title of section 4</h5>
<span className="small text-muted">
<MDBIcon fas icon="clock" className="me-1" />
10 October, 2020
</span>
<p className="mt-2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque
scelerisque diam non nisi semper, et elementum lorem ornare.
Maecenas placerat facilisis mollis. Duis sagittis ligula in
sodales vehicula....
</p>
<p className="mb-0">
Voluptatibus temporibus esse illum eum aspernatur, fugiat
suscipit natus! Eum corporis illum nihil officiis tempore.
Excepturi illo natus libero sit doloremque, laborum molestias
rerum pariatur quam ipsam necessitatibus incidunt, explicabo.
</p>
</MDBCardBody>
</MDBCard>
</div>
</div>
</MDBContainer>
);
}
/* The actual timeline (the vertical ruler) */
.main-timeline-5 {
position: relative;
max-width: 50%;
margin: 0 auto;
}
/* The actual timeline (the vertical ruler) */
.main-timeline-5::after {
content: "";
position: absolute;
width: 3px;
background-color: #fff;
top: 0;
bottom: 0;
left: auto;
margin-left: -3px;
}
/* Container around content */
.timeline-5 {
position: relative;
background-color: inherit;
width: 100%;
}
/* The circles on the timeline */
.timeline-5::after {
content: "";
position: absolute;
width: 17px;
height: 17px;
right: 1px;
background-color: #fff;
top: 18px;
border-radius: 50%;
z-index: 1;
}
/* Place the container to the right */
.right-5 {
padding: 0px 0px 20px 40px;
left: auto;
}
/* Add arrows to the right container (pointing left) */
.right-5::before {
content: " ";
position: absolute;
top: 18px;
z-index: 1;
left: 30px;
border: medium solid #fff;
border-width: 10px 10px 10px 0;
border-color: transparent #fff transparent transparent;
}
/* Fix the circle for containers on the right side */
.right-5::after {
left: -10px;
}
@media (max-width: 991px) {
.main-timeline-5 {
max-width: 100%;
}
}
.gradient-custom-5 {
/* fallback for old browsers */
background: #ebbba7;
/* Chrome 10-25, Safari 5.1-6 */
background: -webkit-linear-gradient(
to right,
rgba(235, 187, 167, 1),
rgba(207, 199, 248, 1)
);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
background: linear-gradient(
to right,
rgba(235, 187, 167, 1),
rgba(207, 199, 248, 1)
);
}