Bootstrap 5 + Timeline

February 7, 2022

This example contains implementation of popular "timeline" feature.

Made on clear HTML with Bootstrap 5

Download example Live demo

Advanced

GitHub repository with more advanced version, made on Rails 7 with data source as JSON file.

If you'd like to say thanks, I'd appreciate a coffee :)

Code example

<div class="row">
    <div class="col-auto text-center flex-column d-none d-sm-flex">
        <div class="vr h-50 mx-4 mb-2"></div>
        <i class="bi bi-circle" style="font-size: 1.5rem; color: gray;"></i>
        <div class="vr h-50 mx-4 mt-2"></div>
    </div>
    <div class="col py-2">
        <div class="card">
            <div class="card-body">
                <div class="float-right text-muted">2017-2018</div>
                <h4 class="card-title">Model 3</h4>
                <div class="card-text">
                    <p>Tesla began selling its fourth vehicle model, the <b>Model 3</b> sedan, in July 2017. The <b>Model 3</b> was a cheaper vehicle compared to previous Tesla vehicles,
                    and was intended for the mass market.</p>
                </div>
                <div><img src="bootstrap_timeline/Model_3.jpg" class="img-thumbnail w-50 h-50"/></div>
            </div>
        </div>
    </div>
</div>