Vue Bootstrap Timeline

Vue Bootstrap Timeline - Bootstrap 4 & Material Design

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5

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

Visit the API tab and check available props for mdb-timeline and mdb-timeline-item components to create your customized timeline

Basic responsive timeline MDB Pro component

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.

Show code

template
script

        
            
          <template>
            <mdb-timeline>
              <mdb-timeline-item v-for="(item, i) in timeline" :key="i" :content="item.content" :title="item.title"
                :inverted="item.inverted" :color="item.color" :icon="item.icon" :far="item.far" :time="item.time" />
            </mdb-timeline>
          </template>

        
            
          <script>
            import {
              mdbTimeline,
              mdbTimelineItem
            } from 'mdbvue';
            export default {
              name: 'TimelinePage',
              components: {
                mdbTimeline,
                mdbTimelineItem
              },
              data() {
                return {
                  timeline: [{
                      title: 'Sed ut perspiciatis unde',
                      content: "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.",
                      icon: 'check',
                      color: 'primary',
                      inverted: false,
                      time: "11 hours ago via Twitter"
                    },
                    {
                      title: "Acusamus et iusto odio dignissimos ducimus",
                      content: "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.",
                      icon: 'credit-card',
                      color: 'warning',
                      inverted: true,
                      far: true
                    },
                    {
                      title: 'Beatae vitae dicta sunt explicabo',
                      content: "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.",
                      icon: 'credit-card',
                      color: 'danger',
                      inverted: false,
                    },
                    {
                      title: 'Sed ut perspiciatis unde',
                      content: "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.",
                      icon: 'save',
                      color: 'info',
                      inverted: true,
                    },
                    {
                      title: 'Perspiciatis unde',
                      content: "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.",
                      icon: 'thumbs-up',
                      color: 'success',
                      inverted: false,
                      far: true
                    }
                  ],
                }
              }
            }
          </script>

Colorful timeline MDB Pro component

To create colorful timeline, add colorful prop to mdb-timeline - now the color property defined for each mdb-timeline-item will apply to header as well as marker icon.

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.

Show code

template
script

        
            
          <template>
            <mdb-timeline colorful>
              <mdb-timeline-item v-for="(item, i) in colorfulTimeline" :key="i" :content="item.content"
                :title="item.title" :inverted="item.inverted" :color="item.color" :icon="item.icon" :far="item.far"
                :time="item.time" />
            </mdb-timeline>
          </template>

        
            
          <script>
            import {
              mdbTimeline,
              mdbTimelineItem
            } from 'mdbvue';
            export default {
              name: 'TimelinePage',
              components: {
                mdbTimeline,
                mdbTimelineItem
              },
              data() {
                return {
                  colorfulTimeline: [{
                      title: 'Sed ut perspiciatis unde',
                      content: "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.",
                      icon: 'check',
                      color: 'warning',
                      inverted: false,
                      time: "11 hours ago via Twitter"
                    },
                    {
                      title: "Acusamus et iusto odio dignissimos ducimus",
                      content: "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.",
                      icon: 'credit-card',
                      color: 'danger',
                      inverted: true,
                      far: true
                    },
                    {
                      title: 'Beatae vitae dicta sunt explicabo',
                      content: "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.",
                      icon: 'credit-card',
                      color: 'success',
                      inverted: false,
                    },
                    {
                      title: 'Sed ut perspiciatis unde',
                      content: "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.",
                      icon: 'save',
                      color: 'primary',
                      inverted: true,
                    },
                    {
                      title: 'Perspiciatis unde',
                      content: "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.",
                      icon: 'thumbs-up',
                      color: 'info',
                      inverted: false,
                      far: true
                    }
                  ]
                }
              }
            }
          </script>

Animated on scroll timeline MDB Pro component

Animate your timeline while scrolling by defining animation property on mdb-timeline-item component - animation will work with custom css classes as well as any of our predefined animations.

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.
Mussum ipsum cacilds

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.

Show code

template
script
style

        
            
          <template>
            <mdb-timeline>
              <mdb-timeline-item v-for="(item, i) in animatedTimeline" :key="i" :content="item.content"
                :title="item.title" :inverted="item.inverted" :color="item.color" :icon="item.icon" :far="item.far"
                :time="item.time" :fab="item.fab" :animation="item.animation" />
            </mdb-timeline>
          </template>

        
            
          <script>
            import {
              mdbTimeline,
              mdbTimelineItem
            } from 'mdbvue';
            export default {
              name: 'TimelinePage',
              components: {
                mdbTimeline,
                mdbTimelineItem
              },
              data() {
                return {
                  animatedTimeline: [{
                      title: 'Sed ut perspiciatis unde',
                      content: "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.",
                      icon: 'heart',
                      color: 'default',
                      inverted: false,
                      time: "11 hours ago via Twitter",
                      animation: 'timeline-animation-left'
                    },
                    {
                      title: "Acusamus et iusto odio dignissimos ducimus",
                      content: "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.",
                      icon: 'users',
                      color: 'secondary',
                      inverted: true,
                      animation: 'timeline-animation-right'
                    },
                    {
                      title: 'Beatae vitae dicta sunt explicabo',
                      content: "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.",
                      icon: 'cloud',
                      color: 'blue',
                      inverted: false,
                      animation: 'timeline-animation-left'
                    },
                    {
                      title: 'Sed ut perspiciatis unde',
                      content: "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.",
                      icon: 'coffee',
                      color: 'danger',
                      inverted: true,
                      animation: 'timeline-animation-right'
                    },
                    {
                      title: 'Perspiciatis unde',
                      content: "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.",
                      icon: 'instagram',
                      color: 'stylish',
                      inverted: false,
                      fab: true,
                      animation: 'timeline-animation-left'
                    }
                  ],
                }
              }
            }
          </script>

        
            
          <style>
            .timeline-animation-left {
              animation-name: timeline-left
            }

            @keyframes timeline-left {
              from {
                padding-left: 100px;
              }

              to {
                padding-left: 24px
              }
            }

            .timeline-animation-right {
              animation-name: timeline-right
            }

            @keyframes timeline-right {
              from {
                padding-right: 100px;
              }

              to {
                padding-right: 24px
              }
            }
          </style>

Simple timeline MDB Pro component

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.

Show code

template
script

        
            
          <template>
            <mdb-timeline simple>
              <mdb-timeline-item v-for="(item, i) in simpleTimeline" :key="i" :content="item.content"
                :title="item.title" :inverted="item.inverted" :time="item.time" />
            </mdb-timeline>
          </template>

        
            
          <script>
            import {
              mdbTimeline,
              mdbTimelineItem
            } from 'mdbvue';
            export default {
              name: 'TimelinePage',
              components: {
                mdbTimeline,
                mdbTimelineItem
              },
              data() {
                return {
                  simpleTimeline: [{
                      title: 'Sed ut perspiciatis unde',
                      content: "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.",
                      inverted: false,
                      time: "11 hours ago via Twitter"
                    },
                    {
                      title: "Acusamus et iusto odio dignissimos ducimus",
                      content: "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.",
                      inverted: true,
                    },
                    {
                      title: 'Beatae vitae dicta sunt explicabo',
                      content: "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.",
                      inverted: false,
                    },
                    {
                      title: 'Sed ut perspiciatis unde',
                      content: "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.",
                      inverted: true,
                    },
                    {
                      title: 'Perspiciatis unde',
                      content: "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.",
                      inverted: false,
                    }
                  ],
                }
              }
            }
          </script>

Timeline with images MDB Pro component

Timeline with images requires setting images property to true on mdb-timeline and passing image's source path to mdb-timeline-item's imgSrc prop.

1

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

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

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

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

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.

Show code

template
script

        
            
          <template>
            <mdb-timeline images lineColor="#26c6da">
              <mdb-timeline-item v-for="(item, i) in imageTimeline" :key="i" :content="item.content" :title="item.title"
                :inverted="item.inverted" :time="item.time" :imgSrc="item.imgSrc" :marker="item.marker"
                :color="item.color" />
            </mdb-timeline>
          </template>

        
            
          <script>
            import {
              mdbTimeline,
              mdbTimelineItem
            } from 'mdbvue';
            export default {
              name: 'TimelinePage',
              components: {
                mdbTimeline,
                mdbTimelineItem
              },
              data() {
                return {
                  imageTimeline: [{
                      title: 'Sed ut perspiciatis unde',
                      content: "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.",
                      inverted: false,
                      time: "11 hours ago via Twitter",
                      imgSrc: "https://mdbootstrap.com/img/Photos/Slides/img%20(135).webp",
                      marker: "1",
                      color: "cyan lighten-1"
                    },
                    {
                      title: "Acusamus et iusto odio dignissimos ducimus",
                      content: "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.",
                      inverted: true,
                      imgSrc: "https://mdbootstrap.com/img/Photos/Slides/img%20(144).webp",
                      marker: "2",
                      color: "cyan lighten-1"
                    },
                    {
                      title: 'Beatae vitae dicta sunt explicabo',
                      content: "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.",
                      inverted: false,
                      imgSrc: "https://mdbootstrap.com/img/Photos/Slides/img%20(129).webp",
                      marker: "3",
                      color: "cyan lighten-1"
                    },
                    {
                      title: 'Sed ut perspiciatis unde',
                      content: "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.",
                      inverted: true,
                      imgSrc: "https://mdbootstrap.com/img/Photos/Slides/img%20(131).webp",
                      marker: "4",
                      color: "cyan lighten-1"
                    },
                    {
                      title: 'Perspiciatis unde',
                      content: "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.",
                      inverted: false,
                      imgSrc: "https://mdbootstrap.com/img/Photos/Slides/img%20(125).webp",
                      marker: "5",
                      color: "cyan lighten-1"
                    }
                  ],
                }
              }
            }
          </script>

Timeline light

Text 1
Text 2
Text 3
Text 4
Text 5

Show code

template
script
style

        
            
    <template>
      <mdb-timeline light>
        <mdb-timeline-item icon="circle" far content="Text 1" tailStyle="dashed" />
        <mdb-timeline-item icon="circle" far iconClass="grey-text" content="Text 2" />
        <mdb-timeline-item icon="circle-notch" iconClass="red-text spinner-1" content="Text 3" />
        <mdb-timeline-item icon="spinner" iconClass="purple-text spinner-2" tailColor="rgb(43, 187, 173)"
          tailStyle="dotted" content="Text 4" />
        <mdb-timeline-item far icon="smile" iconClass="black-text spinner-1" content="Text 5" />
      </mdb-timeline>
    </template>

        
            
    <script>
      import {
        mdbTimeline,
        mdbTimelineItem
      } from 'mdbvue';

      export default {
        name: 'TimelinePage',
        components: {
          mdbTimeline,
          mdbTimelineItem
        }
      }
    </script>

        
            
    <style>
      .spinner-1 {
        animation: spinner 1s 1s infinite linear;
      }

      .spinner-2 {
        animation: spinner 2s 2s infinite linear;
      }

      @keyframes spinner {
        0% {
          transform: rotate(0deg);
        }

        100% {
          transform: rotate(-360deg);
        }
      }
    </style>

Timeline with custom content

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.

Italy, 12.06.1998
Quam elementum pulvinar etiam non quam lacus. Aenean euismod elementum nisi quis eleifend quam adipiscing vitae. Ultricies lacus sed turpis tincidunt.

Portugal, 30.11.2012
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Warsaw, 11.03.2015
Sollicitudin ac orci phasellus egestas. Risus sed vulputate odio ut enim blandit volutpat maecenas volutpat. Dui faucibus in ornare quam viverra. Varius vel pharetra vel turpis nunc eget lorem dolor. At volutpat diam ut venenatis tellus in metus vulputate.

Warsaw, 19.08.2019
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Warsaw, 19.08.2019

Show code

template
script

        
            
    <template>
      <mdb-timeline>
        <mdb-timeline-item color="light-blue lighten-4" icon="child">
          <mdb-row>
            <mdb-col sm="6">
              <p class="text-muted mb-2">
                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>
            </mdb-col>
            <mdb-col sm="6">
              <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/People/6-col/img(120).webp" />
            </mdb-col>
          </mdb-row>
          <hr />
          <p class="text-right text-muted">Italy, 12.06.1998</p>
        </mdb-timeline-item>
        <mdb-timeline-item color="light-blue lighten-3" inverted icon="plane-arrival">
          <mdb-row>
            <mdb-col sm="6">
              <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/People/6-col/img(117).webp" />
            </mdb-col>
            <mdb-col sm="6">
              <p class="text-muted mt-2">
                Quam elementum pulvinar etiam non quam lacus. Aenean euismod
                elementum nisi quis eleifend quam adipiscing vitae. Ultricies
                lacus sed turpis tincidunt.
              </p>
            </mdb-col>
          </mdb-row>
          <hr />
          <p class="text-right text-muted">Portugal, 30.11.2012</p>
        </mdb-timeline-item>
        <mdb-timeline-item color="light-blue lighten-2" icon="home">
          <mdb-row>
            <mdb-col sm="6">
              <p class="text-muted mb-2">
                Ut enim ad minim veniam, quis nostrud exercitation ullamco
                laboris nisi ut aliquip ex ea commodo consequat.
              </p>
            </mdb-col>
            <mdb-col sm="6">
              <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/People/6-col/img(114).webp" />
            </mdb-col>
          </mdb-row>
          <hr />
          <p class="text-right text-muted">Warsaw, 11.03.2015</p>
        </mdb-timeline-item>
        <mdb-timeline-item color="light-blue lighten-1" inverted icon="heart" far>
          <mdb-row>
            <mdb-col sm="6">
              <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/People/6-col/img(129).webp" />
            </mdb-col>
            <mdb-col sm="6">
              <p class="text-muted mt-2">
                Sollicitudin ac orci phasellus egestas. Risus sed vulputate
                odio ut enim blandit volutpat maecenas volutpat. Dui faucibus
                in ornare quam viverra. Varius vel pharetra vel turpis nunc
                eget lorem dolor. At volutpat diam ut venenatis tellus in
                metus vulputate.
              </p>
            </mdb-col>
          </mdb-row>
          <hr />
          <p class="text-right text-muted">Warsaw, 19.08.2019</p>
        </mdb-timeline-item>
        <mdb-timeline-item color="light-blue" icon="heart">
          <mdb-row>
            <mdb-col sm="6">
              <p class="text-muted mb-2">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
                do eiusmod tempor incididunt ut labore et dolore magna aliqua.
              </p>
            </mdb-col>
            <mdb-col sm="6">
              <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/People/6-col/img(127).webp" />
            </mdb-col>
          </mdb-row>
          <hr />
          <p class="text-right text-muted">Warsaw, 19.08.2019</p>
        </mdb-timeline-item>
      </mdb-timeline>
    </template>

        
            
    <script>
      import {
        mdbTimeline,
        mdbTimelineItem,
        mdbRow,
        mdbCol
      } from 'mdbvue';

      export default {
        name: 'TimelinePage',
        components: {
          mdbTimeline,
          mdbTimelineItem,
          mdbRow,
          mdbCol
        }
      }
    </script>

Timeline - API

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

Import statement

Show code

script

        
            
      <script>
        import {
          mdbTimeline,
          mdbTimelineItem
        } from 'mdbvue';
      </script>

Timeline

API Reference: Properties

Name	Type	Default	Description	Example
`light`	Boolean	`false`	Set to `true` will change timeline's layout to light version.	`<mdb-timeline light/>`
`colorful`	Boolean	`false`	Set to `true` will change timeline's layout to version with colorful headers.	`<mdb-timeline colorful/>`
`simple`	Boolean	`false`	Set to `true` will change timeline's layout to simple version.	`<mdb-timeline simple/>`
`images`	Boolean	`false`	Set to `true` will change timeline's layout to version with images.	`<mdb-timeline images/>`
`lineColor`	String	`"rgb(204, 204, 204)"`	Changes colors of the main line in timelines with `images` or `simple` property	`<mdb-timeline lineColor="red"/>`

Timeline item

API Reference: Properties

Name	Type	Default	Description	Example
`tag`	String	`li`	Sets component's tag.	`<mdb-timeline-item tag="li"/>`
`title`	String	`""`	Defines title displayed on the card	`<mdb-timeline-item title="Title 1"/>`
`icon`	String		Icon displayed in the marker	`<mdb-timeline-item icon="paper-plane" />`
`marker`	String		Text displayed in the marker	`<mdb-timeline-item marker="1" />`
`fab`	Boolean		Changes icon's style to fab.	`<mdb-timeline-item fab icon="..." />`
`far`	Boolean		Changes icon's style to far.	`<mdb-timeline-item far icon="..." />`
`fad`	Boolean		Changes icon's style to fad.	`<mdb-timeline-item fad icon="..." />`
`fal`	Boolean		Changes icon's style to fal.	`<mdb-timeline-item fal icon="..." />`
`time`	String		If defined, its value will be displayed next to clock icon.	`<mdb-timeline-item time="2 days ago" />`
`href`	String	`"!#"`	Link activated while clicking on the marker	`<mdb-timeline-item href="https://mdbootstrap.com/" />`
`color`	String		Defines color of the marker (and header in colorful timeline)	`<mdb-timeline-item color="warning" />`
`iconClass`	String		Class names binded to marker's icon.	`<mdb-timeline-item iconClass="my-css-class" />`
`tailStyle`	String	`'solid'`	In light timeline, this property will define line's style.	`<mdb-timeline-item tailStyle="dotted" />`
`tailColor`	String	`'#E8E8E8'`	In light timeline, this property will define line's style.	`<mdb-timeline-item tailColor="red" />`
`animation`	Object, String		In animated timeline this property defines animation which will start once element is fully displayed. For more details and options checkout our directive `animateOnScroll`.	`<mdb-timeline-item :animation="{animation: 'bounceInLeft', delay: 300, position: 20}" />`
`imgSrc`	String		In images timeline this property defines source path to an image.	`<mdb-timeline-item imgSrc="../1.webp" />`

API Reference: Slots

Name	Description
`default`	Use this slot to creata the timeline with your custom content