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.

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

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

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

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

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

        
            
    <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

        
            
      <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