{"id":14972401,"url":"https://github.com/mdbootstrap/bootstrap-timeline","last_synced_at":"2025-08-09T23:44:24.719Z","repository":{"id":66086852,"uuid":"395675897","full_name":"mdbootstrap/bootstrap-timeline","owner":"mdbootstrap","description":"Horizontal and vertical examples of responsive Timelines built with the latest Bootstrap 5. Easy to use and customize.","archived":false,"fork":false,"pushed_at":"2022-01-28T09:16:33.000Z","size":980,"stargazers_count":12,"open_issues_count":0,"forks_count":1,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-01-31T22:25:26.553Z","etag":null,"topics":["bootstrap","bootstrap-5","bootstrap-gradient","bootstrap-template","bootstrap-timeline","bootstrap5","gradient-background","responsive","responsive-design","timeline"],"latest_commit_sha":null,"homepage":"https://mdbootstrap.com/docs/standard/extended/timeline/","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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-08-13T14:03:05.000Z","updated_at":"2025-01-25T00:07:30.000Z","dependencies_parsed_at":"2023-07-16T05:15:16.772Z","dependency_job_id":null,"html_url":"https://github.com/mdbootstrap/bootstrap-timeline","commit_stats":{"total_commits":5,"total_committers":3,"mean_commits":"1.6666666666666667","dds":0.6,"last_synced_commit":"aa0eddf5568da35101b056cd5997cb2a052dc0f7"},"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mdbootstrap%2Fbootstrap-timeline","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mdbootstrap%2Fbootstrap-timeline/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mdbootstrap%2Fbootstrap-timeline/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mdbootstrap%2Fbootstrap-timeline/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mdbootstrap","download_url":"https://codeload.github.com/mdbootstrap/bootstrap-timeline/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238386208,"owners_count":19463318,"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","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-5","bootstrap-gradient","bootstrap-template","bootstrap-timeline","bootstrap5","gradient-background","responsive","responsive-design","timeline"],"created_at":"2024-09-24T13:46:51.841Z","updated_at":"2025-02-11T23:32:56.184Z","avatar_url":"https://github.com/mdbootstrap.png","language":"JavaScript","readme":"\nResponsive Timelines built with the latest Bootstrap 5. Horizontal and vertical examples. Easy to use and customize.\n\nCheck out [Bootstrap Timeline Documentation](https://mdbootstrap.com/docs/standard/extended/timeline/) for detailed instructions \u0026 even more examples.\n\n## Basic example\n\n![Bootstrap 5 Timeline](https://mdbootstrap.com/img/Marketing/github/timeline/basic.png)\n\n```html\n\u003csection style=\"background-color: #F0F2F5;\"\u003e\n  \u003cdiv class=\"container py-5\"\u003e\n    \u003cdiv class=\"main-timeline\"\u003e\n      \u003cdiv class=\"timeline left\"\u003e\n        \u003cdiv class=\"card\"\u003e\n          \u003cdiv class=\"card-body p-4\"\u003e\n            \u003ch3\u003e2017\u003c/h3\u003e\n            \u003cp class=\"mb-0\"\u003eLorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.\u003c/p\u003e\n          \u003c/div\u003e\n        \u003c/div\u003e\n      \u003c/div\u003e\n      \u003cdiv class=\"timeline right\"\u003e\n        \u003cdiv class=\"card\"\u003e\n          \u003cdiv class=\"card-body p-4\"\u003e\n            \u003ch3\u003e2016\u003c/h3\u003e\n            \u003cp class=\"mb-0\"\u003eLorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.\u003c/p\u003e\n          \u003c/div\u003e\n        \u003c/div\u003e\n      \u003c/div\u003e\n      \u003cdiv class=\"timeline left\"\u003e\n        \u003cdiv class=\"card\"\u003e\n          \u003cdiv class=\"card-body p-4\"\u003e\n            \u003ch3\u003e2015\u003c/h3\u003e\n            \u003cp class=\"mb-0\"\u003eLorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.\u003c/p\u003e\n          \u003c/div\u003e\n        \u003c/div\u003e\n      \u003c/div\u003e\n      \u003cdiv class=\"timeline right\"\u003e\n        \u003cdiv class=\"card\"\u003e\n          \u003cdiv class=\"card-body p-4\"\u003e\n            \u003ch3\u003e2012\u003c/h3\u003e\n            \u003cp class=\"mb-0\"\u003eLorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.\u003c/p\u003e\n          \u003c/div\u003e\n        \u003c/div\u003e\n      \u003c/div\u003e\n      \u003cdiv class=\"timeline left\"\u003e\n        \u003cdiv class=\"card\"\u003e\n          \u003cdiv class=\"card-body p-4\"\u003e\n            \u003ch3\u003e2011\u003c/h3\u003e\n            \u003cp class=\"mb-0\"\u003eLorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.\u003c/p\u003e\n          \u003c/div\u003e\n        \u003c/div\u003e\n      \u003c/div\u003e\n      \u003cdiv class=\"timeline right\"\u003e\n        \u003cdiv class=\"card\"\u003e\n          \u003cdiv class=\"card-body p-4\"\u003e\n            \u003ch3\u003e2007\u003c/h3\u003e\n            \u003cp class=\"mb-0\"\u003eLorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.\u003c/p\u003e\n          \u003c/div\u003e\n        \u003c/div\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/section\u003e\n```\n\n```css\n/* The actual timeline (the vertical ruler) */\n.main-timeline {\n  position: relative;\n}\n\n/* The actual timeline (the vertical ruler) */\n.main-timeline::after {\n  content: '';\n  position: absolute;\n  width: 6px;\n  background-color: #939597;\n  top: 0;\n  bottom: 0;\n  left: 50%;\n  margin-left: -3px;\n}\n\n/* Container around content */\n.timeline {\n  position: relative;\n  background-color: inherit;\n  width: 50%;\n}\n\n/* The circles on the timeline */\n.timeline::after {\n  content: '';\n  position: absolute;\n  width: 25px;\n  height: 25px;\n  right: -13px;\n  background-color: #939597;\n  border: 5px solid #F5DF4D;\n  top: 15px;\n  border-radius: 50%;\n  z-index: 1;\n}\n\n/* Place the container to the left */\n.left {\n  padding: 0px 40px 20px 0px;\n  left: 0;\n}\n\n/* Place the container to the right */\n.right {\n  padding: 0px 0px 20px 40px;\n  left: 50%;\n}\n\n/* Add arrows to the left container (pointing right) */\n.left::before {\n  content: \" \";\n  position: absolute;\n  top: 18px;\n  z-index: 1;\n  right: 30px;\n  border: medium solid white;\n  border-width: 10px 0 10px 10px;\n  border-color: transparent transparent transparent white;\n}\n\n/* Add arrows to the right container (pointing left) */\n.right::before {\n  content: \" \";\n  position: absolute;\n  top: 18px;\n  z-index: 1;\n  left: 30px;\n  border: medium solid white;\n  border-width: 10px 10px 10px 0;\n  border-color: transparent white transparent transparent;\n}\n\n/* Fix the circle for containers on the right side */\n.right::after {\n  left: -12px;\n}\n\n/* Media queries - Responsive timeline on screens less than 600px wide */\n@media screen and (max-width: 600px) {\n  /* Place the timelime to the left */\n  .main-timeline::after {\n    left: 31px;\n  }\n\n  /* Full-width containers */\n  .timeline {\n    width: 100%;\n    padding-left: 70px;\n    padding-right: 25px;\n  }\n\n  /* Make sure that all arrows are pointing leftwards */\n  .timeline::before {\n    left: 60px;\n    border: medium solid white;\n    border-width: 10px 10px 10px 0;\n    border-color: transparent white transparent transparent;\n  }\n\n  /* Make sure all circles are at the same spot */\n  .left::after, .right::after {\n    left: 18px;\n  }\n\n  .left::before {\n    right: auto;\n  }\n\n  /* Make all right containers behave like the left ones */\n  .right {\n    left: 0%;\n  }\n}\n```\n\n## How to use?\n\n1. Download MDB 5 - free 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## More examples\n\n[Bootstrap Timeline events:\n![Bootstrap 5 Timeline](https://mdbootstrap.com/img/Marketing/github/timeline/section-2.png)](https://mdbootstrap.com/docs/standard/extended/timeline/#section-timeline-events)\n\n[Bootstrap Horizontal timeline:\n![Bootstrap 5 Timeline](https://mdbootstrap.com/img/Marketing/github/timeline/section-3.png)](https://mdbootstrap.com/docs/standard/extended/timeline/#section-horizontal-timeline)\n\n[Bootstrap Timeline with images:\n![Bootstrap 5 Timeline](https://mdbootstrap.com/img/Marketing/github/timeline/section-4.png)](https://mdbootstrap.com/docs/standard/extended/timeline/#section-timeline-images)\n\n[Bootstrap Timeline latest news:\n![Bootstrap 5 Timeline](https://mdbootstrap.com/img/Marketing/github/timeline/section-5.png)](https://mdbootstrap.com/docs/standard/extended/timeline/#section-timeline-latest-news)\n\n[Bootstrap Timeline gradient cards:\n![Bootstrap 5 Timeline](https://mdbootstrap.com/img/Marketing/github/timeline/section-6.png)](https://mdbootstrap.com/docs/standard/extended/timeline/#section-timeline-gradient)\n\n[Bootstrap Timeline gradient background:\n![Bootstrap 5 Timeline](https://mdbootstrap.com/img/Marketing/github/timeline/section-7.png)](https://mdbootstrap.com/docs/standard/extended/timeline/#section-timeline-gradient-bg)\n\n___\n\n## More extended Bootstrap documentation\n\n\u003cul\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/bootstrap-address-form/\"\u003eBootstrap Address Form\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/avatar/\"\u003eBootstrap Avatar\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/back-to-top/\"\u003eBootstrap Back To Top Button\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/carousel-with-thumbnails/\"\u003eBootstrap Carousel Slider with Thumbnails\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/chat/\"\u003eBootstrap Chat\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/code/\"\u003eBootstrap Code Blocks\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/comments/\"\u003eBootstrap Comments\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/bootstrap-comparison-table/\"\u003eBootstrap Comparison Table\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/credit-card/\"\u003eBootstrap Credit Card Form\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/drawer/\"\u003eBootstrap Drawer\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/dropdown-multilevel/\"\u003eBootstrap Nested Dropdown\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/faq/\"\u003eBootstrap FAQ component / section\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/gallery/\"\u003eBootstrap Gallery\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/hamburger-menu/\"\u003eBootstrap Hamburger Menu\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/bootstrap-invoice/\"\u003eBootstrap Invoice\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/jumbotron/\"\u003eBootstrap Jumbotron\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/login/\"\u003eBootstrap Login Form\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/maps/\"\u003eBootstrap Maps\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/media-object/\"\u003eBootstrap Media Object\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/mega-menu/\"\u003eBootstrap Mega Menu\u003c/a\u003e\u003c/li\u003e \n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/multiselect/\"\u003eBootstrap Multiselect\u003c/a\u003e\u003c/li\u003e \n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/news-feed/\"\u003eBootstrap News Feed\u003c/a\u003e\u003c/li\u003e \n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/offcanvas/\"\u003eBootstrap Offcanvas\u003c/a\u003e\u003c/li\u003e \n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/order-details/\"\u003eBootstrap Order Details\u003c/a\u003e\u003c/li\u003e \n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/page-transitions/\"\u003eBootstrap Page Transitions\u003c/a\u003e\u003c/li\u003e \n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/payment-forms/\"\u003eBootstrap Payment Forms\u003c/a\u003e\u003c/li\u003e \n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/product-cards/\"\u003eBootstrap Product Cards\u003c/a\u003e\u003c/li\u003e \n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/profiles/\"\u003eBootstrap Profiles\u003c/a\u003e\u003c/li\u003e  \n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/quotes/\"\u003eBootstrap Quotes\u003c/a\u003e\u003c/li\u003e \n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/registration/\"\u003eBootstrap Registration Form\u003c/a\u003e\u003c/li\u003e \n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/search-expanding/\"\u003eBootstrap Expanding Search Bar\u003c/a\u003e\u003c/li\u003e \n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/shopping-carts/\"\u003eBootstrap Shopping Carts\u003c/a\u003e\u003c/li\u003e \n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/side-navbar/\"\u003eBootstrap Side Navbar\u003c/a\u003e\u003c/li\u003e  \n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/sidebar/\"\u003eBootstrap Sidebar\u003c/a\u003e\u003c/li\u003e  \n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/social-media/\"\u003eBootstrap Social Media Icons \u0026 Buttons\u003c/a\u003e\u003c/li\u003e  \n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/square-buttons/\"\u003eBootstrap Square Buttons\u003c/a\u003e\u003c/li\u003e  \n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/bootstrap-survey-form/\"\u003eBootstrap Survey Form\u003c/a\u003e\u003c/li\u003e  \n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/testimonial-slider/\"\u003eBootstrap Testimonial Slider\u003c/a\u003e\u003c/li\u003e  \n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/testimonials/\"\u003eBootstrap Testimonials\u003c/a\u003e\u003c/li\u003e  \n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/textarea/\"\u003eBootstrap Textarea\u003c/a\u003e\u003c/li\u003e  \n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/timeline/\"\u003eBootstrap Timeline\u003c/a\u003e\u003c/li\u003e  \n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/to-do-list/\"\u003eBootstrap To Do List\u003c/a\u003e\u003c/li\u003e  \n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/video-carousel/\"\u003eBootstrap Video Carousel / Gallery\u003c/a\u003e\u003c/li\u003e  \n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/standard/extended/weather/\"\u003eBootstrap Weather\u003c/a\u003e\u003c/li\u003e  \n\u003c/ul\u003e\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmdbootstrap%2Fbootstrap-timeline","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmdbootstrap%2Fbootstrap-timeline","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmdbootstrap%2Fbootstrap-timeline/lists"}