React Bootstrap 5 Timeline 

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>
  );
}

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>
  );
}

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>
  );
}

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 &amp; 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>
  );
}

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>
  );
}

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>
  );
}

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>
  );
}

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>
  );
}

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>
  );
}