<div class="container my-5">

​

  <!-- Section: Introduction -->

  <section class="">

​

    <p>Free examples of Bootstrap bootstrap timeline horizontal.  </p>

​

    <p>

      Detailed documentation and more examples you can find in our

      <a href="https://mdbootstrap.com/docs/standard/extended/timeline/" target="_blank"><strong>Timeline Docs</strong></a>.

    </p>

​

    <hr class="mt-5">

​

    <p>Built with <a target="_blank" href="https://mdbootstrap.com/docs/standard/">Material Design for Bootstrap</a> - free and powerful Bootstrap UI KIT</p>

​

    <a class="btn btn-primary me-2" href="https://mdbootstrap.com/docs/standard/getting-started/installation/" target="_blank" role="button">Download MDB UI KIT <i class="fas fa-download ms-2"></i></a>

    <a class="btn btn-danger me-2" target="_blank" href="https://mdbootstrap.com/docs/standard/" role="button">Learn more</a>

    <a class="btn btn-success me-2" target="_blank" href="https://mdbootstrap.com/docs/standard/getting-started/" role="button">Tutorials</a>

    <a class="btn btn-dark me-2" target="_blank" href="https://github.com/mdbootstrap/mdb-ui-kit" role="button">GitHub <i class="fab fa-github ms-2"></i></a>

​

    <hr class="mb-5"/>

​

  </section>

  <!-- Section: Introduction -->

​

  <!-- Section: Basic example -->

  <section class="">

​

    <p><strong>Basic example</strong></p>

​

    <div class="container-fluid py-5">

​

      <div class="row">

        <div class="col-lg-12">

​

          <div class="horizontal-timeline">

​

            <ul class="list-inline items">

              <li class="list-inline-item items-list">

                <div class="px-4">

                  <div class="event-date badge bg-info">2 June</div>

                  <h5 class="pt-2">Event One</h5>

                  <p class="text-muted">It will be as simple as occidental in fact it will be Occidental Cambridge

                    friend</p>

                  <div>

                    <a href="#" class="btn btn-primary btn-sm">Read more</a>

                  </div>

                </div>

              </li>

              <li class="list-inline-item items-list">

                <div class="px-4">

                  <div class="event-date badge bg-success">5 June</div>

                  <h5 class="pt-2">Event Two</h5>

                  <p class="text-muted">Everyone realizes why a new common language one could refuse translators.</p>

                  <div>

                    <a href="#" class="btn btn-primary btn-sm">Read more</a>

                  </div>

                </div>

              </li>

              <li class="list-inline-item items-list">

                <div class="px-4">

                  <div class="event-date badge bg-danger">7 June</div>

                  <h5 class="pt-2">Event Three</h5>

                  <p class="text-muted">If several languages coalesce the grammar of the resulting simple and regular</p>

                  <div>

                    <a href="#" class="btn btn-primary btn-sm">Read more</a>

                  </div>

                </div>

              </li>

              <li class="list-inline-item items-list">

                <div class="px-4">

                  <div class="event-date badge bg-warning">8 June</div>

                  <h5 class="pt-2">Event Four</h5>

                  <p class="text-muted">Languages only differ in their pronunciation and their most common words.</p>

                  <div>

                    <a href="#" class="btn btn-primary btn-sm">Read more</a>

                  </div>

                </div>

              </li>

            </ul>

​

          </div>

​

        </div>

      </div>

​

    </div>

​

  </section>

  <!-- Section: Basic example -->

</div>