Timeline

Bootstrap Timeline - examples & tutorial

Responsive Timelines built with the latest Bootstrap 5. Horizontal and vertical examples. Easy to use and customize.


Basic example

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.

 

          <section style="background-color: #F0F2F5;">
            <div class="container py-5">
              <div class="main-timeline">
                <div class="timeline left">
                  <div class="card">
                    <div class="card-body p-4">
                      <h3>2017</h3>
                      <p class="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>
                    </div>
                  </div>
                </div>
                <div class="timeline right">
                  <div class="card">
                    <div class="card-body p-4">
                      <h3>2016</h3>
                      <p class="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>
                    </div>
                  </div>
                </div>
                <div class="timeline left">
                  <div class="card">
                    <div class="card-body p-4">
                      <h3>2015</h3>
                      <p class="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>
                    </div>
                  </div>
                </div>
                <div class="timeline right">
                  <div class="card">
                    <div class="card-body p-4">
                      <h3>2012</h3>
                      <p class="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>
                    </div>
                  </div>
                </div>
                <div class="timeline left">
                  <div class="card">
                    <div class="card-body p-4">
                      <h3>2011</h3>
                      <p class="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>
                    </div>
                  </div>
                </div>
                <div class="timeline right">
                  <div class="card">
                    <div class="card-body p-4">
                      <h3>2007</h3>
                      <p class="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>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </section>

        


          /* 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

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

 

          <div class="container py-5">
            <div class="row">
              <div class="col-md-12">
                <div id="content">
                  <ul class="timeline-1 text-black">
                    <li class="event" data-date="12:30 - 1:00pm">
                      <h4 class="mb-3">Registration</h4>
                      <p>Get here on time, it's first come first serve. Be late, get turned away.</p>
                    </li>
                    <li class="event" data-date="2:30 - 4:00pm">
                      <h4 class="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 class="event" data-date="5:00 - 8:00pm">
                      <h4 class="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 class="event" data-date="8:30 - 9:30pm">
                      <h4 class="mb-3 pt-3">Closing Ceremony</h4>
                      <p class="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>
              </div>
            </div>
          </div>

        


          .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

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

 

          <div class="container-fluid py-5">

            <div class="row">
              <div class="col-lg-12">
      
                <div class="horizontal-timeline">
      
                  <ul class="list-inline items">
                    <li class="list-inline-item items-list">
                      <div class="px-4">
                        <div class="event-date badge bg-info">2 June</div>
                        <h5 class="pt-2">Event One</h5>
                        <p class="text-muted">It will be as simple as occidental in fact it will be Occidental Cambridge
                          friend</p>
                        <div>
                          <a href="#" class="btn btn-primary btn-sm">Read more</a>
                        </div>
                      </div>
                    </li>
                    <li class="list-inline-item items-list">
                      <div class="px-4">
                        <div class="event-date badge bg-success">5 June</div>
                        <h5 class="pt-2">Event Two</h5 class="pt-2">
                        <p class="text-muted">Everyone realizes why a new common language one could refuse translators.</p>
                        <div>
                            <a href="#" class="btn btn-primary btn-sm">Read more</a>
                        </div>
                      </div>
                    </li>
                    <li class="list-inline-item items-list">
                      <div class="px-4">
                        <div class="event-date badge bg-danger">7 June</div>
                        <h5 class="pt-2">Event Three</h5>
                        <p class="text-muted">If several languages coalesce the grammar of the resulting simple and regular</p>
                        <div>
                          <a href="#" class="btn btn-primary btn-sm">Read more</a>
                        </div>
                      </div>
                    </li>
                    <li class="list-inline-item items-list">
                      <div class="px-4">
                        <div class="event-date badge bg-warning">8 June</div>
                        <h5 class="pt-2">Event Four</h5>
                        <p class="text-muted">Languages only differ in their pronunciation and their most common words.</p>
                        <div>
                          <a href="#" class="btn btn-primary btn-sm">Read more</a>
                        </div>
                      </div>
                    </li>
                  </ul>
      
                </div>
      
              </div>
            </div>
      
          </div>

        


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

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.

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.

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?

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.

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.

 

          <section style="background-color: #F0F2F5;">
            <div class="container py-5">
              <div class="main-timeline-2">
                <div class="timeline-2 left-2">
                  <div class="card">
                    <img src="https://mdbootstrap.com/img/Photos/Slides/img%20(135).jpg" class="card-img-top"
                    alt="Responsive image">
                    <div class="card-body p-4">
                      <h4 class="fw-bold mb-4">Ut enim ad minim veniam</h4>
                      <p class="text-muted mb-4"><i class="far fa-clock" aria-hidden="true"></i> 2017</p>
                      <p class="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>
                    </div>
                  </div>
                </div>
                <div class="timeline-2 right-2">
                  <div class="card">
                    <img src="https://mdbootstrap.com/img/Photos/Slides/img%20(129).jpg" class="card-img-top"
                    alt="Responsive image">
                    <div class="card-body p-4">
                      <h4 class="fw-bold mb-4">Duis aute irure dolor</h4>
                      <p class="text-muted mb-4"><i class="far fa-clock" aria-hidden="true"></i> 2016</p>
                      <p class="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>
                    </div>
                  </div>
                </div>
                <div class="timeline-2 left-2">
                  <div class="card">
                    <img src="https://mdbootstrap.com/img/Photos/Slides/img%20(131).jpg" class="card-img-top"
                    alt="Responsive image">
                    <div class="card-body p-4">
                      <h4 class="fw-bold mb-4">Sed ut nihil unde omnis</h4>
                      <p class="text-muted mb-4"><i class="far fa-clock" aria-hidden="true"></i> 2015</p>
                      <p class="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>
                    </div>
                  </div>
                </div>
                <div class="timeline-2 right-2">
                  <div class="card">
                    <img src="https://mdbootstrap.com/img/Photos/Slides/img%20(125).jpg" class="card-img-top"
                      alt="Responsive image">
                    <div class="card-body p-4">
                      <h4 class="fw-bold mb-4"> Quis autem vel eum voluptate</h4>
                      <p class="text-muted mb-4"><i class="far fa-clock" aria-hidden="true"></i> 2014</p>
                      <p class="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>
                    </div>
                  </div>
                </div>
                <div class="timeline-2 left-2">
                  <div class="card">
                    <img src="https://mdbootstrap.com/img/Photos/Slides/img%20(144).jpg" class="card-img-top"
                      alt="Responsive image">
                    <div class="card-body p-4">
                      <h4 class="fw-bold mb-4">Mussum ipsum cacilds</h4>
                      <p class="text-muted mb-4"><i class="far fa-clock" aria-hidden="true"></i> 2013</p>
                      <p class="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>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </section>

        


          /* 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

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

 

          <div class="container my-5">
            <div class="row">
              <div class="col-md-6 offset-md-3">
                <h4 style="margin-left: 1.2rem;">Latest News</h4>
                <ul class="timeline-3">
                  <li>
                    <a href="#!">New Web Design</a>
                    <a href="#!" class="float-end">21 March, 2014</a>
                    <p class="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="#!" class="float-end">4 March, 2014</a>
                    <p class="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="#!" class="float-end">1 April, 2014</a>
                    <p class="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>
              </div>
            </div>
          </div>

        


          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

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
 

          <div class="container py-5">
            <div class="main-timeline-4 text-white">
              <div class="timeline-4 left-4">
                <div class="card gradient-custom">
                  <div class="card-body p-4">
                    <i class="fas fa-brain fa-2x mb-3"></i>
                    <h4>7:45PM</h4>
                    <p class="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>
                    <h6 class="badge bg-light text-black mb-0">New</h6>
                    <h6 class="badge bg-light text-black mb-0">Admin</h6>
                  </div>
                </div>
              </div>
              <div class="timeline-4 right-4">
                <div class="card gradient-custom-4">
                  <div class="card-body p-4">
                    <i class="fas fa-camera fa-2x mb-3"></i>
                    <h4>8:00 AM</h4>
                    <p class="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>
                    <h6 class="badge bg-light text-black mb-0">New</h6>
                    <h6 class="badge bg-light text-black mb-0">Admin</h6>
                  </div>
                </div>
              </div>
              <div class="timeline-4 left-4">
                <div class="card gradient-custom">
                  <div class="card-body p-4">
                    <i class="fas fa-campground fa-2x mb-3"></i>
                    <h4>7:25 PM</h4>
                    <p class="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>
                    <h6 class="badge bg-light text-black mb-0">New</h6>
                    <h6 class="badge bg-light text-black mb-0">Admin</h6>
                  </div>
                </div>
              </div>
              <div class="timeline-4 right-4">
                <div class="card gradient-custom-4">
                  <div class="card-body p-4">
                    <i class="fas fa-sun fa-2x mb-3"></i>
                    <h4>3:55 PM</h4>
                    <p class="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>
                    <h6 class="badge bg-light text-black mb-0">New</h6>
                    <h6 class="badge bg-light text-black mb-0">Admin</h6>
                  </div>
                </div>
              </div>
              <div class="timeline-4 left-4">
                <div class="card gradient-custom">
                  <div class="card-body p-4">
                    <i class="fas fa-palette fa-2x mb-3"></i>
                    <h4>5:24 PM</h4>
                    <p class="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>
                    <h6 class="badge bg-light text-black mb-0">New</h6>
                    <h6 class="badge bg-light text-black mb-0">Admin</h6>
                  </div>
                </div>
              </div>
              <div class="timeline-4 right-4">
                <div class="card gradient-custom-4">
                  <div class="card-body p-4">
                    <i class="fas fa-laugh-beam fa-2x mb-3"></i>
                    <h4>11:25 AM</h4>
                    <p class="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>
                    <h6 class="badge bg-light text-black mb-0">New</h6>
                    <h6 class="badge bg-light text-black mb-0">Admin</h6>
                  </div>
                </div>
              </div>
              <div class="timeline-4 left-4">
                <div class="card gradient-custom">
                  <div class="card-body p-4">
                    <i class="fas fa-pizza-slice fa-2x mb-3"></i>
                    <h4>12:30 PM</h4>
                    <p class="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>
                    <h6 class="badge bg-light text-black mb-0">New</h6>
                    <h6 class="badge bg-light text-black mb-0">Admin</h6>
                  </div>
                </div>
              </div>
            </div>
          </div>

        


          /* 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

Title of section 1

21 March, 2020

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

Title of section 2

5 April, 2020

Lorem 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, 2020

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

Title of section 4

10 October, 2020

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

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.

 

          <section class="gradient-custom-5">
            <div class="container py-5">
              <div class="main-timeline-5">
                <div class="timeline-5 right-5">
                  <div class="card">
                    <div class="card-body p-4">
                      <h2 class="h5">Title of section 1</h2>
                      <span class="small text-muted"><i class="fa fa-clock-o me-1"></i>21 March, 2020</span>
                      <p class="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>
                    </div>
                  </div>
                </div>
                <div class="timeline-5 right-5">
                  <div class="card">
                    <div class="card-body p-4">
                      <h2 class="h5">Title of section 2</h2>
                      <span class="small text-muted"><i class="fa fa-clock-o me-1"></i>5 April, 2020</span>
                      <p class="mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque scelerisque diam non nisi semper.</p>
                      <p class="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>
                    </div>
                  </div>
                </div>
                <div class="timeline-5 right-5">
                  <div class="card">
                    <div class="card-body p-4">
                      <h2 class="h5">Title of section 3</h2>
                      <span class="small text-muted"><i class="fa fa-clock-o me-1"></i>18 August, 2020</span>
                      <p class="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>
                    </div>
                  </div>
                </div>
                <div class="timeline-5 right-5">
                  <div class="card">
                    <div class="card-body p-4">
                      <h2 class="h5">Title of section 4</h2>
                      <span class="small text-muted"><i class="fa fa-clock-o me-1"></i>10 October, 2020</span>
                      <p class="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 class="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>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </section>

        


          /* 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))
          }