Bootstrap Vertical Left-Right Timeline with Dots

How to use this Bootstrap snippet
  • Released on 05 May 2021

    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.

  • Released on 18 Jan 2018

    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.

  • Released on 19 Aug 2013

    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.

  • Released on 31 Jan 2012

    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.

How to use this Bootstrap Vertical Left-Right Timeline with Dots

Place the code in the <body> for Interface 
          
<!-- Timeline 4 - Bootstrap Brain Component -->
<section class="bsb-timeline-4 bg-light 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-meta">
                <div class="d-inline-flex flex-column px-2 py-1 text-success-emphasis bg-success-subtle border border-success-subtle rounded-2 text-md-end">
                  <span>Released on 05 May 2021</span>
                </div>
              </div>
              <div class="timeline-content timeline-indicator">
                <div class="card border-0 shadow">
                  <div class="card-body p-xl-4">
                    <h2 class="card-title mb-2">Bootstrap 5</h2>
                    <h6 class="card-subtitle text-secondary mb-3">Active Support</h6>
                    <p class="card-text m-0">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>
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="timeline-item right">
            <div class="timeline-body">
              <div class="timeline-meta">
                <div class="d-inline-flex flex-column px-2 py-1 text-success-emphasis bg-success-subtle border border-success-subtle rounded-2 text-md-end">
                  <span>Released on 18 Jan 2018</span>
                </div>
              </div>
              <div class="timeline-content timeline-indicator">
                <div class="card border-0 shadow">
                  <div class="card-body p-xl-4">
                    <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 m-0">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>
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="timeline-item left">
            <div class="timeline-body">
              <div class="timeline-meta">
                <div class="d-inline-flex flex-column px-2 py-1 text-success-emphasis bg-success-subtle border border-success-subtle rounded-2 text-md-end">
                  <span>Released on 19 Aug 2013</span>
                </div>
              </div>
              <div class="timeline-content timeline-indicator">
                <div class="card border-0 shadow">
                  <div class="card-body p-xl-4">
                    <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 m-0">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>
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="timeline-item right">
            <div class="timeline-body">
              <div class="timeline-meta">
                <div class="d-inline-flex flex-column px-2 py-1 text-success-emphasis bg-success-subtle border border-success-subtle rounded-2 text-md-end">
                  <span>Released on 31 Jan 2012</span>
                </div>
              </div>
              <div class="timeline-content timeline-indicator">
                <div class="card border-0 shadow">
                  <div class="card-body p-xl-4">
                    <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 m-0">Sleek, intuitive, and powerful front-end framework for faster and easier web development. Bootstrap 2 is no longer officially supported.</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/[email protected]/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/tutorials/timelines/timeline-4/assets/css/timeline-4.css">

This Bootstrap Timeline has vertical left-right content pointing towards dots. This Bootstrap Timeline has dates and Timeline content in the form of Bootstrap cards.