Bootstrap Timeline with Images

How to use this Bootstrap snippet
  • Bootstrap 5

    Bootstrap 5

    Active Support

    Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins.

    Last updated 3 mins ago

  • Bootstrap 4

    Bootstrap 4

    No Active Support

    Get started with Bootstrap, the world’s most popular framework for building responsive, mobile-first sites, with jsDelivr and a template starter page. Bootstrap 4 has no active support.

    Last updated 2 months ago

  • Bootstrap 3

    Bootstrap 3

    No Active Support

    Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. Bootstrap 3 has no active support.

    Last updated 1 year ago

  • Bootstrap 2

    Bootstrap 2

    No Active Support

    Sleek, intuitive, and powerful front-end framework for faster and easier web development. Bootstrap 2 is no longer officially supported.

    Last updated 2 years ago

How to use this Bootstrap Timeline with Images

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

        <ul class="timeline">
          <li class="timeline-item left">
            <div class="timeline-body">
              <div class="timeline-content">
                <div class="card border-0">
                  <img class="card-img-top img-fluid" loading="lazy" src="./assets/img/timeline-img-1.jpg" alt="Bootstrap 5">
                  <div class="card-body border border-top-0 border-light-subtle">
                    <h2 class="card-title mb-2">Bootstrap 5</h2>
                    <h6 class="card-subtitle text-secondary mb-3">Active Support</h6>
                    <p class="card-text mb-2">Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins.</p>
                    <p class="card-text m-0"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="timeline-item right">
            <div class="timeline-body">
              <div class="timeline-content">
                <div class="card border-0">
                  <img class="card-img-top img-fluid" loading="lazy" src="./assets/img/timeline-img-2.jpg" alt="Bootstrap 4">
                  <div class="card-body border border-top-0 border-light-subtle">
                    <h2 class="card-title mb-2">Bootstrap 4</h2>
                    <h6 class="card-subtitle text-secondary mb-3">No Active Support</h6>
                    <p class="card-text mb-2">Get started with Bootstrap, the world’s most popular framework for building responsive, mobile-first sites, with jsDelivr and a template starter page. Bootstrap 4 has no active support.</p>
                    <p class="card-text m-0"><small class="text-body-secondary">Last updated 2 months ago</small></p>
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="timeline-item left">
            <div class="timeline-body">
              <div class="timeline-content">
                <div class="card border-0">
                  <img class="card-img-top img-fluid" loading="lazy" src="./assets/img/timeline-img-3.jpg" alt="Bootstrap 3">
                  <div class="card-body border border-top-0 border-light-subtle">
                    <h2 class="card-title mb-2">Bootstrap 3</h2>
                    <h6 class="card-subtitle text-secondary mb-3">No Active Support</h6>
                    <p class="card-text mb-2">Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. Bootstrap 3 has no active support.</p>
                    <p class="card-text m-0"><small class="text-body-secondary">Last updated 1 year ago</small></p>
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="timeline-item right">
            <div class="timeline-body">
              <div class="timeline-content">
                <div class="card border-0">
                  <img class="card-img-top img-fluid" loading="lazy" src="./assets/img/timeline-img-4.jpg" alt="Bootstrap 2">
                  <div class="card-body border border-top-0 border-light-subtle">
                    <h2 class="card-title mb-2">Bootstrap 2</h2>
                    <h6 class="card-subtitle text-secondary mb-3">No Active Support</h6>
                    <p class="card-text mb-2">Sleek, intuitive, and powerful front-end framework for faster and easier web development. Bootstrap 2 is no longer officially supported.</p>
                    <p class="card-text m-0"><small class="text-body-secondary">Last updated 2 years ago</small></p>
                  </div>
                </div>
              </div>
            </div>
          </li>
        </ul>

      </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-6/assets/css/timeline-6.css">

This Bootstrap Timeline with dots represents the Timeline content having images. This Bootstrap Timeline is ideal for displaying blog post entries as a timeline. This Bootstrap Timeline has a responsive layout and sleek design.