Rate this docs

React Bootstrap Timeline MDB Pro component

React Timeline - Bootstrap 4 & Material Design

Bootstrap Timeline is a component which can be used to display content in chronological order. Listed items may contain not only text but also images.

It's great for sharing a story of your projects or a roadmap of its development.

Examples of Bootstrap Timeline use:

  • Company history
  • A projects roadmap
  • A visual presentation of how your portfolio evolved

Basic example

Basic responsive timeline.

  • Ut enim ad minim veniam

    11 hours ago via Twitter

    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.

  • Duis aute irure dolor

    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.

  • Sed ut nihil unde omnis

    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?

  • Quis autem vel eum voluptate

    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.

    Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. 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.

  • Mussum ipsum cacilds

    Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. 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 { Timeline, TimelineStep } from "mdbreact";

          const TimelinePage = () => {
          return (
          <Timeline>
            <TimelineStep icon="check">
              <h4 className="font-weight-bold">Ut enim ad minim veniam</h4>
              <p className="text-muted mt-3">
                <i className="fa fa-clock-o" aria-hidden="true" /> 11 hours ago via
                Twitter
              </p>
              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.
            </TimelineStep>
            <TimelineStep inverted color="warning-color" icon="credit-card-alt">
              <h4 className="font-weight-bold">Duis aute irure dolor</h4>
              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.
            </TimelineStep>
            <TimelineStep icon="credit-card" color="danger-color">
              <h4 className="font-weight-bold">Sed ut nihil unde omnis</h4>
              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?
            </TimelineStep>
            <TimelineStep inverted icon="floppy-o" color="info-color">
              <h4 className="font-weight-bold">Quis autem vel eum voluptate</h4>
              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.
            </TimelineStep>
            <TimelineStep icon="thumbs-o-up" color="success-color">
              <h4 className="font-weight-bold">Mussum ipsum cacilds</h4>
              Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil
              impedit quo minus id quod maxime placeat facere possimus, omnis voluptas
              assumenda est, omnis dolor repellendus. 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.
            </TimelineStep>
          </Timeline>
          );
          };

          export default TimelinePage;

      

React Timeline - API

In this section you will find advanced information about the Timeline component. You will find out which modules are required, what are the possibilities of configuring the component, and what events and methods you can use in working with it.


Timeline import statement

In order to use Timeline component make sure you have imported proper module first.


        import { Timeline, TimelineStep } from "mdbreact";
      

TimelineStep PropTypes

The table below shows the configuration options of the Modal component.

Name Type Default Description Example
className string Adds custom class to the component. <TimelineStep className="myClass" ... />
color string primary-color Defines TimelineStep's color <TimelineStep color="pink" ... />
colorful boolean If set, applies the colorful styles set <TimelineStep colorful ... />
hoverable boolean If set, applies the hoverable styles set <TimelineStep hoverable ... />
href string # Defines TimelineStep's href attrubute <TimelineStep href="www.mdbooststrap.com" ... />
icon string Defines TimelineStep's icon <TimelineStep icon="checked" ... />
inverted boolean If set, applies the inverted styles set <TimelineStep inverted ... />
label string Defines TimelineStep's inner text <TimelineStep label="1" ... />

React Timeline - examples & customization

Quickly get a project started with any of our examples.


Colorful timeline

  • Ut enim ad minim veniam

    11 hours ago via Twitter

    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.

  • Duis aute irure dolor

    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.

  • Sed ut nihil unde omnis

    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?

  • Quis autem vel eum voluptate

    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.

    Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. 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.

  • Mussum ipsum cacilds

    Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. 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 { Timeline, TimelineStep } from "mdbreact";
      import "./TimelinePage.css";

      const TimelinePage = () => {
      return (
      <section id="timelineColorful">
        <Timeline>
          <TimelineStep colorful icon="check" color="red darken-2">
            <h4 className="font-weight-bold red darken-2 white-text p-3">
              Ut enim ad minim veniam
            </h4>
            <p className="text-muted mt-3 px-4">
              <i className="fa fa-clock-o" aria-hidden="true" /> 11 hours ago via
              Twitter
            </p>
            <p className="mb-0 px-4 pb-4">
              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>
          </TimelineStep>
          <TimelineStep colorful inverted color="red darken-2" icon="credit-card-alt">
            <h4 className="font-weight-bold red darken-2 white-text p-3">
              Ut enim ad minim veniam
            </h4>
            <p className="text-muted mt-4 px-4">
              <i className="fa fa-clock-o" aria-hidden="true" /> 11 hours ago via
              Twitter
            </p>
            <p className="mb-0 px-4 pb-4">
              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>
          </TimelineStep>
          <TimelineStep colorful icon="credit-card" color="red darken-2">
            <h4 className="font-weight-bold  red darken-2 white-text p-3 mb-0">
              Duis aute irure dolor
            </h4>
            <p className="mb-0 p-4">
              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>
          </TimelineStep>
          <TimelineStep colorful inverted icon="floppy-o" color="red darken-2">
            <h4 className="font-weight-bold red darken-2 white-text p-3">
              Ut enim ad minim veniam
            </h4>
            <p className="text-muted mt-4 px-4">
              <i className="fa fa-clock-o" aria-hidden="true" /> 11 hours ago via
              Twitter
            </p>
            <p className="mb-0 px-4 pb-4">
              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>
          </TimelineStep>
          <TimelineStep colorful icon="thumbs-o-up" color="red darken-2">
            <h4 className="font-weight-bold red darken-2 white-text p-3 mb-0">
              Mussum ipsum cacilds
            </h4>
            <p className="mb-0 p-4">
              Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil
              impedit quo minus id quod maxime placeat facere possimus, omnis
              voluptas assumenda est, omnis dolor repellendus. 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>
          </TimelineStep>
        </Timeline>
      </section>
      );
      };

      export default TimelinePage;

    

/* #timelineColorful */
#timelineColorful .stepper.timeline li .step-content:before {
top: 1rem;
border-left: 15px solid #d32f2f;
border-right: 0 solid #d32f2f;
}
#timelineColorful .stepper.timeline li .step-content:after {
top: 1rem;
right: -14px;
border-left: 14px solid #d32f2f;
border-right: 0 solid #d32f2f;
}

#timelineColorful .stepper.stepper-vertical.timeline li:not(:last-child):after {
background-color: #d32f2f;
}

#timelineColorful .stepper.timeline li.timeline-inverted {
-webkit-box-align: end;
-webkit-align-items: flex-end;
-ms-flex-align: end;
align-items: flex-end;
}

#timelineColorful .stepper.timeline li.timeline-inverted .step-content {
float: right;
}

#timelineColorful .stepper.timeline li.timeline-inverted .step-content:before {
border-left-width: 0;
border-right-width: 15px;
left: -15px;
right: auto;
}

#timelineColorful .stepper.timeline li.timeline-inverted .step-content:after {
border-left-width: 0;
border-right-width: 14px;
left: -14px;
right: auto;
}

    

Simple hoverable timeline

  • 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.

  • 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.

  • 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?

  • 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.

  • 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 { Timeline, TimelineStep, Fa } from "mdbreact";
import "./TimelinePage.css";

const TimelinePage = () => {
return (
<section id="timelineHoverable">
  <Timeline>
    <TimelineStep hoverable color="grey">
      <h4 className="font-weight-bold p-4 mb-0">Ut enim ad minim veniam</h4>
      <p className="text-muted px-4 mb-0">
        <Fa icon="clock-o" /> 2017
      </p>
      <p className="mb-0 p-4">
        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>
    </TimelineStep>
    <TimelineStep inverted hoverable color="grey">
      <h4 className="font-weight-bold p-4 mb-0">Duis aute irure dolor</h4>
      <p className="text-muted px-4 mb-0">
        <Fa icon="clock-o" /> 2016
      </p>
      <p className="mb-0 p-4">
        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>
    </TimelineStep>
    <TimelineStep hoverable color="grey">
      <h4 className="font-weight-bold p-4 mb-0">Sed ut nihil unde omnis</h4>
      <p className="text-muted px-4 mb-0">
        <Fa icon="clock-o" /> 2015
      </p>
      <p className="mb-0 p-4">
        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>
    </TimelineStep>
    <TimelineStep inverted hoverable color="grey">
      <h4 className="font-weight-bold p-4 mb-0">
        Quis autem vel eum voluptate
      </h4>
      <p className="text-muted px-4 mb-0">
        <Fa icon="clock-o" /> 2014
      </p>
      <p className="mb-0 p-4">
        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>
    </TimelineStep>
    <TimelineStep hoverable color="grey">
      <h4 className="font-weight-bold p-4 mb-0">Mussum ipsum cacilds</h4>
      <p className="text-muted px-4 mb-0">
        <Fa icon="clock-o" /> 2013
      </p>
      <p className="mb-0 p-4">
        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>
    </TimelineStep>
  </Timeline>
</section>
);
};

export default TimelinePage;
    

#timelineHoverable .stepper.timeline li a {
padding: 0px;
}

#timelineHoverable .stepper.timeline li a .circle {
margin-top: 0.9rem;
width: 23px;
height: 23px;
line-height: 23px;
font-size: 1em;
margin-left: -12px;
background-color: #ccc;
}

#timelineHoverable
.stepper.stepper-vertical.timeline
li:not(:last-child):after {
width: 2px;
background-color: #e0e0e0;
top: 32px;
height: 100%;
}
    

Timeline with images

  • 1
    Responsive image

    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.

  • 2
    Responsive image

    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.

  • 3
    Responsive image

    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?

  • 4
    Responsive image

    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.

  • 5
    Responsive image

    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 { Timeline, TimelineStep, Fa } from "mdbreact";
        import "./TimelinePage.css";

        const TimelinePage = () => {
          return (
            <section id="timelineImages">
              <Timeline>
                <TimelineStep colorful hoverable color="cyan" label="1">
                  <img
                    src="https://mdbootstrap.com/img/Photos/Slides/img%20(135).jpg"
                    className="img-fluid"
                    alt=""
                  />
                  <h4 className="font-weight-bold p-4 mb-0">Ut enim ad minim veniam</h4>
                  <p className="text-muted px-4 mb-0">
                    <Fa icon="clock-o" /> 2017
                  </p>
                  <p className="mb-0 p-4">
                    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>
                </TimelineStep>
                <TimelineStep colorful inverted hoverable color="cyan" label="2">
                  <img
                    src="https://mdbootstrap.com/img/Photos/Slides/img%20(129).jpg"
                    className="img-fluid"
                    alt=""
                  />
                  <h4 className="font-weight-bold p-4 mb-0">Duis aute irure dolor</h4>
                  <p className="text-muted px-4 mb-0">
                    <Fa icon="clock-o" /> 2016
                  </p>
                  <p className="mb-0 p-4">
                    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>
                </TimelineStep>
                <TimelineStep colorful hoverable color="cyan" label="3">
                  <img
                    src="https://mdbootstrap.com/img/Photos/Slides/img%20(131).jpg"
                    className="img-fluid"
                    alt=""
                  />
                  <h4 className="font-weight-bold p-4 mb-0">Sed ut nihil unde omnis</h4>
                  <p className="text-muted px-4 mb-0">
                    <Fa icon="clock-o" /> 2015
                  </p>
                  <p className="mb-0 p-4">
                    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>
                </TimelineStep>
                <TimelineStep colorful inverted hoverable color="cyan" label="4">
                  <img
                    src="https://mdbootstrap.com/img/Photos/Slides/img%20(125).jpg"
                    className="img-fluid"
                    alt=""
                  />
                  <h4 className="font-weight-bold p-4 mb-0">
                    Quis autem vel eum voluptate
                  </h4>
                  <p className="text-muted px-4 mb-0">
                    <Fa icon="clock-o" /> 2014
                  </p>
                  <p className="mb-0 p-4">
                    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>
                </TimelineStep>
                <TimelineStep colorful hoverable color="cyan" label="5">
                  <img
                    src="https://mdbootstrap.com/img/Photos/Slides/img%20(144).jpg"
                    className="img-fluid"
                    alt=""
                  />
                  <h4 className="font-weight-bold p-4 mb-0">Mussum ipsum cacilds</h4>
                  <p className="text-muted px-4 mb-0">
                    <Fa icon="clock-o" /> 2013
                  </p>
                  <p className="mb-0 p-4">
                    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>
                </TimelineStep>
              </Timeline>
            </section>
          );
        };

        export default TimelinePage;

    


        #timelineImages .stepper.timeline li a {
          padding: 0px;
        }

        #timelineImages .stepper.timeline li a .circle {
          margin-top: 0.9rem;
          width: 23px;
          height: 23px;
          line-height: 23px;
          font-size: 1em;
          margin-left: -12px;
          background-color: #ccc;
        }

        #timelineImages .stepper.stepper-vertical.timeline li:not(:last-child):after {
          width: 2px;
          background-color: #26c6da;
          top: 32px;
          height: 100%;
        }