<div class="container py-5">
  <div class="bstl-line mx-auto">
    <div class="bstl-item">
      <span class="badge rounded-circle bg-primary bstl-badge">1</span>
      <div class="card bstl-card">
        <div class="card-body">
          <div class="small text-muted mb-1">Jan 2024</div>
          <h6 class="fw-bold mb-1">Company founded</h6>
          <p class="small mb-0">Started as a two-person team working out of a shared office space.</p>
        </div>
      </div>
    </div>
    <div class="bstl-item">
      <span class="badge rounded-circle bg-success bstl-badge">2</span>
      <div class="card bstl-card">
        <div class="card-body">
          <div class="small text-muted mb-1">Jun 2024</div>
          <h6 class="fw-bold mb-1">First 1,000 users</h6>
          <p class="small mb-0">Crossed our first major growth milestone six months after launch.</p>
        </div>
      </div>
    </div>
    <div class="bstl-item">
      <span class="badge rounded-circle bg-warning bstl-badge">3</span>
      <div class="card bstl-card">
        <div class="card-body">
          <div class="small text-muted mb-1">Nov 2024</div>
          <h6 class="fw-bold mb-1">Seed funding closed</h6>
          <p class="small mb-0">Raised our seed round to expand the team and accelerate development.</p>
        </div>
      </div>
    </div>

    <div id="bstlMore">
      <div class="bstl-item">
        <span class="badge rounded-circle bg-info bstl-badge">4</span>
        <div class="card bstl-card">
          <div class="card-body">
            <div class="small text-muted mb-1">Mar 2025</div>
            <h6 class="fw-bold mb-1">Launched mobile app</h6>
            <p class="small mb-0">Released native iOS and Android apps after months of beta testing.</p>
          </div>
        </div>
      </div>
      <div class="bstl-item">
        <span class="badge rounded-circle bg-danger bstl-badge">5</span>
        <div class="card bstl-card">
          <div class="card-body">
            <div class="small text-muted mb-1">Sep 2025</div>
            <h6 class="fw-bold mb-1">Opened second office</h6>
            <p class="small mb-0">Expanded to a second city as the team grew past fifty people.</p>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="text-center mt-3">
    <button type="button" class="btn btn-outline-primary btn-sm" id="bstlLoadMore">Load more</button>
  </div>
</div>

.bstl-line { max-width: 560px; position: relative; padding-left: 40px; }
.bstl-line::before { content: ''; position: absolute; left: 15px; top: 4px; bottom: 4px; width: 2px; background: #dee2e6; }
.bstl-item { position: relative; margin-bottom: 1.5rem; }
.bstl-badge { position: absolute; left: -40px; top: 0; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; font-size: .85rem; }
.bstl-card { border: 1px solid #eceef1; border-radius: 10px; }
#bstlMore.d-none { display: none; }

const moreSection = document.getElementById('bstlMore');
const loadMoreBtn = document.getElementById('bstlLoadMore');

moreSection.classList.add('d-none');

loadMoreBtn.addEventListener('click', () => {
  moreSection.classList.remove('d-none');
  loadMoreBtn.remove();
});