Bootstrap Timeline Card Example

How to use this Bootstrap snippet
Recent Transactions
  • 32 minutes
    Amount received in the PayPal gateway.
    User: William Lucas
  • 49 minutes
    New sale recorded in the Bootstrap admin templates.
    Product: Console
  • 2 hours
    User registered in the discount campaign.
    Country: United States
  • 19 hours
    Ticket created about the SSL certificate of the domain.
    Issue: Technical

How to use this Bootstrap Timeline Card Example

Place the code in the <body> for Interface 
          
<!-- Timeline 8 - Bootstrap Brain Component -->
<section class="py-3 py-md-5">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-12 col-md-9 col-lg-7 col-xl-6 col-xxl-5">

        <div class="card widget-card bsb-timeline-8 border-light shadow-sm">
          <div class="card-body p-4">
            <h5 class="card-title widget-card-title mb-3">Recent Transactions</h5>

            <ul class="timeline">
              <li class="timeline-item">
                <div class="timeline-body">
                  <div class="timeline-meta">
                    <span>32 minutes</span>
                  </div>
                  <div class="timeline-content timeline-indicator">
                    <h6 class="mb-1">Amount received in the PayPal gateway.</h6>
                    <span class="text-secondary fs-7">User: William Lucas</span>
                  </div>
                </div>
              </li>
              <li class="timeline-item">
                <div class="timeline-body">
                  <div class="timeline-meta">
                    <span>49 minutes</span>
                  </div>
                  <div class="timeline-content timeline-indicator">
                    <h6 class="mb-1">New sale recorded in the Bootstrap admin templates.</h6>
                    <span class="text-secondary fs-7">Product: Console</span>
                  </div>
                </div>
              </li>
              <li class="timeline-item">
                <div class="timeline-body">
                  <div class="timeline-meta">
                    <span>2 hours</span>
                  </div>
                  <div class="timeline-content timeline-indicator">
                    <h6 class="mb-1">User registered in the discount campaign.</h6>
                    <span class="text-secondary fs-7">Country: United States</span>
                  </div>
                </div>
              </li>
              <li class="timeline-item">
                <div class="timeline-body">
                  <div class="timeline-meta">
                    <span>19 hours</span>
                  </div>
                  <div class="timeline-content timeline-indicator">
                    <h6 class="mb-1">Ticket created about the SSL certificate of the domain.</h6>
                    <span class="text-secondary fs-7">Issue: Technical</span>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>

      </div>
    </div>
  </div>
</section>
Place the <link> tag in the <head> for CSS 
          
<link rel="stylesheet" href="https://unpkg.com/bootstrap@5.3.3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://unpkg.com/bs-brain@2.0.4/tutorials/timelines/timeline-8/assets/css/timeline-8.css">

This Bootstrap Timeline Card Example demonstrates the integration of a timeline feature or component within a Bootstrap Card element for website development. This Bootstrap Timeline Card Example showcases a responsive and visually structured timeline layout enclosed within a card-like container using the Bootstrap framework. The timeline usually presents a linear sequence of events, milestones, or content.