Web Designer Wall

Snippets Form

Bootstrap 5 Event Schedule Timeline

A vertical event timeline with a time rail, session cards with speaker names, and quieter markers for breaks, beside a brand panel with the date and venue.

Bootstrap 5 No jQuery Feb 2020 2.3K views 

<section class="wdw-stage">
  <div class="container" style="max-width: 980px">
    <div class="wdw-card overflow-hidden">
      <div class="row g-0">
        <div class="col-lg-4">
          <div class="wdw-aurora h-100 p-4 d-flex flex-column justify-content-between gap-4">
            <div>
              <span class="badge rounded-pill text-bg-light mb-3">Saturday, 14 June</span>
              <h2 class="fw-bold display-6 mb-3" style="letter-spacing:-.02em">CSS Conference Schedule</h2>
              <p class="mb-0 opacity-75">One day, four talks and plenty of coffee. Here is how the day unfolds.</p>
            </div>
            <div class="small opacity-75">Main hall · 08:30 to 18:30</div>
          </div>
        </div>
        <div class="col-lg-8">
          <div class="p-4">
            <ol class="tl-list list-unstyled mb-0">
        <li class="tl-item tl-break">
          <span class="tl-dot" aria-hidden="true"></span>
          <time class="tl-time" datetime="08:30">08:30</time>
          <div class="tl-body"><span class="fw-semibold small">Registration and welcome coffee</span></div>
        </li>
        <li class="tl-item">
          <span class="tl-dot" aria-hidden="true"></span>
          <time class="tl-time" datetime="09:30">09:30</time>
          <div class="tl-body">
            <div class="small fw-semibold text-primary">Maya Lindqvist</div>
            <h3 class="h6 fw-bold mb-1">Layout for the modern web</h3>
            <p class="small wdw-muted mb-0">Flexbox, grid and container queries are finally enough to build any layout without a hack. Practical patterns and the traps to skip.</p>
          </div>
        </li>
        <li class="tl-item">
          <span class="tl-dot" aria-hidden="true"></span>
          <time class="tl-time" datetime="10:20">10:20</time>
          <div class="tl-body">
            <div class="small fw-semibold text-primary">Daniel Okafor</div>
            <h3 class="h6 fw-bold mb-1">What a redesign teaches us about CSS</h3>
            <p class="small wdw-muted mb-0">A look at the new features behind a recent relaunch and how you can use them in your own projects.</p>
          </div>
        </li>
        <li class="tl-item tl-break">
          <span class="tl-dot" aria-hidden="true"></span>
          <time class="tl-time" datetime="12:00">12:00</time>
          <div class="tl-body"><span class="fw-semibold small">Lunch</span></div>
        </li>
        <li class="tl-item">
          <span class="tl-dot" aria-hidden="true"></span>
          <time class="tl-time" datetime="13:00">13:00</time>
          <div class="tl-body">
            <div class="small fw-semibold text-primary">Sofia Marin</div>
            <h3 class="h6 fw-bold mb-1">Creative CSS and visual effects</h3>
            <p class="small wdw-muted mb-0">Case studies showing how a bit of imagination turns plain styles into memorable interfaces.</p>
          </div>
        </li>
        <li class="tl-item">
          <span class="tl-dot" aria-hidden="true"></span>
          <time class="tl-time" datetime="16:20">16:20</time>
          <div class="tl-body">
            <div class="small fw-semibold text-primary">Brian Hale</div>
            <h3 class="h6 fw-bold mb-1">Ten things to know about animation</h3>
            <p class="small wdw-muted mb-0">Common misunderstandings, hidden features and what is coming next for motion on the web.</p>
          </div>
        </li>
        <li class="tl-item tl-break">
          <span class="tl-dot" aria-hidden="true"></span>
          <time class="tl-time" datetime="18:30">18:30</time>
          <div class="tl-body"><span class="fw-semibold small">Closing remarks</span></div>
        </li>
            </ol>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Built on Bootstrap 5.3.8 with plain JavaScript — no jQuery. Supports light and dark mode via data-bs-theme.

Free to use in personal and commercial projects under the MIT license.

Related snippets

More Form snippets