ng-bootstrap HomeBasicAlertFormsFloating labelsInput groupMulti-rangeRangePhone inputSelectRadioCheckboxDatepickerTimepickerDateTime pickerContainersGridCardTab controlRatingBadgeBreadcrumbButton groupButton typeCalendarMarqueeList groupTreeviewTree selectTableClosePaginationPlaceholderSpinnerColor pickerProgress barFor directiveIconOverlaysModalsOffcanvasTooltipToastPopoverDropdownTypeaheadContext menuShellDropdown menu (WC)AdvancedCopyCode snippetPipesTrust-htmlSplit-stringLinifySlugifyWord-countFont-colorHas-propertyToggle buttonsSticky footerAutofocusTrackByAsync HostBindingInstance ofIs interfaceResizableOrdinal numbersMarkdownParallaxPriority navigationScrollspyFile uploadSignature padLazy-loading componentsUser-agentNavigation lockNavigation lock (master/detail)EnterpriseCarouselSchedulerTimelineDockRibbonTile managerDatatablesFile managerQuery builderOTP inputNavbarSplitterAccordionChartsAnimationsSlide up/downFade in/outColor transitionAdditional samplesCollapseFocusTrapDrag-dropTree-select drag-dropQR-code viewerStepperThemingAnchor scrollingSection 1Section 2Section 3Section 4Section 522.17.0

Timeline

A data-driven timeline of events. Bind [items] and the component renders a marker, title, description and an opposite-side timestamp for each one. Layout is configurable via orientation, align, reverse and selectable; every region can be overridden with a structural template directive (*bsTimelineMarker, *bsTimelineContent, *bsTimelineTimestamp). Items can also be authored declaratively as <mp-timeline-item> children.

Playground

Toggle each input below with a <bs-select> or <bs-checkbox> and watch the single live timeline — and the copyable snippet beneath it — update to match.

ReverseCustom markersCard content
Keyboard shortcuts
  • The timeline is only keyboard-interactive while Selectable is single or multiple. With none it renders as a plain list — the items carry no tabindex and take no focus.
  • Tab — enter the timeline; exactly one item holds the tab stop (roving tabindex)
  • / — next item · / — previous item. Both axes do the same thing whatever the orientation; movement wraps around the ends and skips disabled items.
  • Home / End — first / last enabled item
  • Enter — select the focused item, replacing the current selection
  • Space — with multiple, adds or removes the focused item; with single it behaves like Enter
  • Shift + Enter / Shift + Space — with multiple, adds every enabled item between the anchor and the focused item
  • Ctrl/ + click — toggle one item · Shift + click — range-select from the anchor
2026-01-102026-02-022026-04-152026-05-01

Declarative authoring

Instead of binding [items], drop <mp-timeline-item> children directly inside <bs-timeline> and project into the named slots (opposite, content). Handy when each item's markup is bespoke rather than uniform.

2026-01-10KickoffProject scoping and team assembly.2026-01-102026-05-01Shipped v1First public release.2026-05-01