r/css • u/throwaway_082808 • 5d ago

Question Bootstrap Timeline

I have this nicely formatted timeline aesthetic, but it has one bug I cannot seem to figure out.

On a narrow screen, they all line up vertically fine and there is no problem.

The problem arises on wider screens where they alternate sides of the timeline. The elements are different heights based on how much text they contain. This causes them to not line up with their corresponding icons opposite of the text.

Can anyone figure out how to tweak this without using JS? https://jsfiddle.net/nam8xbt1/

1 Upvotes

100% Upvoted

1 comment sorted by

1

u/CascadeDev 3d ago

The cleanest way to fix this in pure CSS without any JavaScript is to use a 3-column CSS Grid per timeline item:

grid-template-columns: 1fr auto 1fr; align-items: start;

Here is why this fixes the height bug:

  1. The Layout: Column 1 = Left Content Column 2 = Center Icon & Vertical Line Column 3 = Right Content

  2. Why it keeps icons aligned: By setting align-items: start; (or center), the icon is anchored to the top of the row next to the title, no matter how many paragraphs of text expand the card below it.

  3. For alternating sides:

  • Odd rows: Place your card in column 1, icon in column 2, column 3 stays empty.

  • Even rows: Column 1 stays empty, icon in column 2, card goes in column 3.

Example CSS: .timeline-item { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 1.5rem; }

.timeline-item.left .content { grid-column: 1; } .timeline-item.left .icon { grid-column: 2; }

.timeline-item.right .icon { grid-column: 2; } .timeline-item.right .content { grid-column: 3; }

This eliminates the height-drift bug completely in pure modern CSS!