{"id":21287623,"url":"https://github.com/mdbootstrap/react-timeline","last_synced_at":"2025-10-17T01:56:35.828Z","repository":{"id":58295758,"uuid":"529233095","full_name":"mdbootstrap/react-timeline","owner":"mdbootstrap","description":"Responsive React Timelines built with Bootstrap 5. Horizontal and vertical timeline examples, interactive timeline, double-sided timeline \u0026 more. Easy to customize. https://mdbootstrap.com/docs/react/extended/timeline","archived":false,"fork":false,"pushed_at":"2022-08-31T09:57:24.000Z","size":286,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-09-22T18:12:33.835Z","etag":null,"topics":["bootstrap","bootstrap-template","bootstrap-theme","bootstrap5","css","html","js","react","template","timeline"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mdbootstrap.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"License.pdf","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-08-26T11:36:16.000Z","updated_at":"2024-12-24T01:56:30.000Z","dependencies_parsed_at":"2022-08-31T18:20:35.362Z","dependency_job_id":null,"html_url":"https://github.com/mdbootstrap/react-timeline","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/mdbootstrap/react-timeline","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mdbootstrap%2Freact-timeline","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mdbootstrap%2Freact-timeline/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mdbootstrap%2Freact-timeline/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mdbootstrap%2Freact-timeline/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mdbootstrap","download_url":"https://codeload.github.com/mdbootstrap/react-timeline/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mdbootstrap%2Freact-timeline/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279269893,"owners_count":26137639,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-16T02:00:06.019Z","response_time":53,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bootstrap","bootstrap-template","bootstrap-theme","bootstrap5","css","html","js","react","template","timeline"],"created_at":"2024-11-21T12:14:21.156Z","updated_at":"2025-10-17T01:56:35.792Z","avatar_url":"https://github.com/mdbootstrap.png","language":"JavaScript","readme":"![MDB Logo](https://mdbootstrap.com/img/Marketing/general/logo/medium/mdb-react.png)\n\n# MDB React 5\n\nResponsive React Timelines built with Bootstrap 5. Horizontal and vertical timeline examples, interactive timeline, double-sided timeline \u0026 more. Easy to customize.\n\nCheck out [React Timeline Documentation](https://mdbootstrap.com/docs/react/extended/timeline) for detailed instructions \u0026 even more examples.\n\n## Basic example\n![Basic example](https://user-images.githubusercontent.com/108793661/186896362-31b22fba-2f50-41f5-a5ca-ae1ce0f9f448.png)\n```js\nimport React from \"react\";\nimport { MDBContainer } from \"mdb-react-ui-kit\";\n\nexport default function App() {\n  return (\n    \u003cMDBContainer className=\"py-5\"\u003e\n      \u003cul className=\"timeline\"\u003e\n        \u003cli className=\"timeline-item mb-5\"\u003e\n          \u003ch5 className=\"fw-bold\"\u003eOur company starts its operations\u003c/h5\u003e\n          \u003cp className=\"text-muted mb-2 fw-bold\"\u003e11 March 2020\u003c/p\u003e\n          \u003cp className=\"text-muted\"\u003e\n            Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit\n            necessitatibus adipisci, ad alias, voluptate pariatur officia\n            repellendus repellat inventore fugit perferendis totam dolor\n            voluptas et corrupti distinctio maxime corporis optio?\n          \u003c/p\u003e\n        \u003c/li\u003e\n        \u003cli className=\"timeline-item mb-5\"\u003e\n          \u003ch5 className=\"fw-bold\"\u003eFirst customer\u003c/h5\u003e\n          \u003cp className=\"text-muted mb-2 fw-bold\"\u003e19 March 2020\u003c/p\u003e\n          \u003cp className=\"text-muted\"\u003e\n            Quisque ornare dui nibh, sagittis egestas nisi luctus nec. Sed\n            aliquet laoreet sapien, eget pulvinar lectus maximus vel. Phasellus\n            suscipit porta mattis.\n          \u003c/p\u003e\n        \u003c/li\u003e\n        \u003cli className=\"timeline-item mb-5\"\u003e\n          \u003ch5 className=\"fw-bold\"\u003eOur team exceeds 10 people\u003c/h5\u003e\n          \u003cp className=\"text-muted mb-2 fw-bold\"\u003e24 June 2020\u003c/p\u003e\n          \u003cp className=\"text-muted\"\u003e\n            Orci varius natoque penatibus et magnis dis parturient montes,\n            nascetur ridiculus mus. Nulla ullamcorper arcu lacus, maximus\n            facilisis erat pellentesque nec. Duis et dui maximus dui aliquam\n            convallis. Quisque consectetur purus erat, et ullamcorper sapien\n            tincidunt vitae.\n          \u003c/p\u003e\n        \u003c/li\u003e\n        \u003cli className=\"timeline-item mb-5\"\u003e\n          \u003ch5 className=\"fw-bold\"\u003eEarned the first million $!\u003c/h5\u003e\n          \u003cp className=\"text-muted mb-2 fw-bold\"\u003e15 October 2020\u003c/p\u003e\n          \u003cp className=\"text-muted\"\u003e\n            Nulla ac tellus convallis, pulvinar nulla ac, fermentum diam. Sed et\n            urna sit amet massa dapibus tristique non finibus ligula. Nam\n            pharetra libero nibh, id feugiat tortor rhoncus vitae. Ut suscipit\n            vulputate mattis.\n          \u003c/p\u003e\n        \u003c/li\u003e\n      \u003c/ul\u003e\n    \u003c/MDBContainer\u003e\n  );\n}\n```\n```css\n.timeline {\n  border-left: 1px solid hsl(0, 0%, 90%);\n  position: relative;\n  list-style: none;\n}\n\n.timeline .timeline-item {\n  position: relative;\n}\n\n.timeline .timeline-item:after {\n  position: absolute;\n  display: block;\n  top: 0;\n}\n\n.timeline .timeline-item:after {\n  background-color: hsl(0, 0%, 90%);\n  left: -38px;\n  border-radius: 50%;\n  height: 11px;\n  width: 11px;\n  content: \"\";\n}\n```\n\n## How to use?\n\n1. Download MDB 5 - FREE REACT UI KIT\n\n2. Choose your favourite customized component and click on the image\n\n3. Copy \u0026 paste the code into your MDB project\n\n[▶️ Subscribe to YouTube channel for web development tutorials \u0026 resources](https://www.youtube.com/MDBootstrap?sub_confirmation=1)\n\n\n## More examples (click on the image to see a live demo)\n### Events timeline with icons:\n[![React Timeline #1](https://user-images.githubusercontent.com/108793661/186896680-61fe5a0a-63f2-4113-a99d-b612f3232c0f.png)](https://mdbootstrap.com/docs/react/extended/timeline/#section-events-timeline-with-icons)\n\n### Double-sided timeline:\n[![React Timeline #2](https://user-images.githubusercontent.com/108793661/186899284-f278b8f5-a50d-4347-92a2-04c078ae67d9.png)](https://mdbootstrap.com/docs/react/extended/timeline/#section-double-sided)\n\n### Timeline events:\n[![React Timeline #3](https://user-images.githubusercontent.com/108793661/186905495-a99c7170-bef6-4c09-a23d-eb7d279971b3.png)](https://mdbootstrap.com/docs/react/extended/timeline/#section-timeline-events)\n\n### Horizontal timeline:\n[![React Timeline #4](https://user-images.githubusercontent.com/108793661/186905707-26e320d1-8854-48b2-bb88-cbc2e1abb404.png)](https://mdbootstrap.com/docs/react/extended/timeline/#section-horizontal-timeline)\n\n### Timeline with images:\n[![React Timeline #4](https://user-images.githubusercontent.com/108793661/186905867-f54fae7e-b52c-4297-ae9d-efcf8b1ec572.png)](https://mdbootstrap.com/docs/react/extended/timeline/#section-timeline-images)\n\n### Timeline latest news:\n[![React Timeline #5](https://user-images.githubusercontent.com/108793661/186905998-e097c588-ad2a-4d7b-8201-00aeb54fc3e8.png)](https://mdbootstrap.com/docs/react/extended/timeline/#section-timeline-latest-news)\n\nYou can find other examples [here](https://mdbootstrap.com/docs/react/extended/timeline).\n\n\u003chr /\u003e\n\n## More extended React documentation\n\u003cul\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/code/\"\u003eReact Bootstrap Code\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/gallery/\"\u003eReact Bootstrap Gallery\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/hamburger-menu/\"\u003eReact Bootstrap Hamburger Menu\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/jumbotron/\"\u003eReact Bootstrap Jumbotron\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/maps/\"\u003eReact Bootstrap Maps\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/mega-menu//\"\u003eReact Bootstrap Mega Menu\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/media-object/\"\u003eReact Bootstrap Media object\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/multiselect/\"\u003eReact Bootstrap Multiselect\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/masonry/\"\u003eReact Bootstrap Masonry\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/contact/\"\u003eReact Bootstrap Contact form\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/gradients/\"\u003eReact Bootstrap Gradients\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/pagination/\"\u003eReact Bootstrap Pagination\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/panels/\"\u003eReact Bootstrap Panels\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/social-media/\"\u003eReact Bootstrap Social Media icons \u0026 buttons\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/search/\"\u003eReact Bootstrap Search\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/table-sort/\"\u003eReact Bootstrap Table sort\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/table-responsive/\"\u003eReact Bootstrap Table responsive\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/table-scroll/\"\u003eReact Bootstrap Table scroll\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/table-search/\"\u003eReact Bootstrap Table search\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/textarea/\"\u003eReact Bootstrap Textarea\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/sidebar/\"\u003eReact Bootstrap Sidebar\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/profiles/\"\u003eReact Bootstrap Profiles\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/dropdown-multilevel/\"\u003eReact Bootstrap Nested Dropdown\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/bootstrap-address-form/\"\u003eReact Bootstrap Address Form\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/back-to-top\"\u003eReact Scroll Back to Top button\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/product-cards\"\u003eReact Product Cards\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/avatar\"\u003eReact Avatar\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/carousel-with-thumbnails\"\u003eReact Carousel Slider with Thumbnails\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/chat\"\u003eReact Chat\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/comparison-table\"\u003eReact Comparison table\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/comments\"\u003eReact Comments\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/drawer\"\u003eReact Drawer\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/faq\"\u003eReact FAQ component / section\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/invoice\"\u003eReact Invoice\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/news-feed\"\u003eReact News feed\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/offcanvas\"\u003eReact Offcanvas\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/order-details\"\u003eReact Order details\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/page-transitions\"\u003eReact Page transitions\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/quotes\"\u003eReact Quotes\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/payment-forms\"\u003eReact Payment forms\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/select-with-custom-input\"\u003eReact Select with custom Input\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/square-buttons\"\u003eReact Square Buttons\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/testimonial-slider\"\u003eReact Testimonial Slider\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/testimonials\"\u003eReact Testimonials / Reviews\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/bootstrap-survey-form\"\u003eReact Survey form\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmdbootstrap%2Freact-timeline","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmdbootstrap%2Freact-timeline","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmdbootstrap%2Freact-timeline/lists"}