How to Create a Horizontal Timeline in Bootstrap ?

Last Updated : 19 Feb, 2024

A horizontal timeline is a graphical representation of events or milestones displayed horizontally along a linear axis. It’s a visual way to showcase a series of events or points in time, typically arranged from left to right. Each event may include details such as a title, date, description, and links for additional information.

Preview Image:

Output

Approach:

Create the HTML structure for the horizontal timeline using the <div>, heading, <p>, <ul>, <li> etc tags.
Now, add the bootstrap CSS and JavaScript CDN to include it in your HTML document and utilize it.
Use the grid system to organize the layout of the timeline. Typically, events are represented as cards or sections within a container element.
Apply custom CSS to achieve the desired visual appearance of the timeline, including line styles, spacing, and alignment.
Populate the timeline with events, including titles, descriptions, and links for additional information.

Example: The below code explains how you can use bootstrap to create a horizontal timeline.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Horizontal Timeline - Bootstrap 5</title>
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css">
    <style>
        body {
            background: #eee;
            margin-top: 20px;
        }
 
        .hori-timeline .events {
            border-top: 3px solid green;
        }
 
        .hori-timeline .events 
        .event-list {
            display: block;
            position: relative;
            text-align: center;
            margin-right: 0;
        }
 
        .hori-timeline .events 
        .event-list:before {
            content: "";
            position: absolute;
            height: 36px;
            border-right: 2px dashed #2ddf36;
            top: 0;
        }
 
        .hori-timeline .events .event-list 
        .event-date {
            position: absolute;
            top: 38px;
            left: 0;
            right: 0;
            width: 75px;
            margin: 0 auto;
            border-radius: 4px;
            padding: 2px 4px;
        }
 
 
        @media (min-width: 1140px) {
            .hori-timeline .events 
            .event-list {
                display: inline-block;
                width: 24%;
                padding-top: 45px;
            }
 
            .hori-timeline .events 
            .event-list .event-date {
                top: -12px;
            }
        }
 
        .card {
            border: none;
            margin-bottom: 24px;
            box-shadow: 0 0 13px 0 rgba(236, 236, 241, 0.44);
        }
    </style>
</head>
 
<body>
 
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-body">
                        <h4 class="card-title mb-5 text-success">
                            Bootstrap 5 Horizontal Timeline
                        </h4>
 
                        <div class="hori-timeline" dir="ltr">
                            <ul class="list-inline events">
                                <li class="list-inline-item event-list">
                                    <div class="px-4">
 
                                        <h5 class="font-size-16 text-primary">
                                            GPL 2021
                                        </h5>
 
                                        <p class="text-info">
                                            This contest is over now and prize 
                                            distribution is over now thank you 
                                              for join. 
                                        </p>
                                        <div>
                                            <a href="https://www.geeksforgeeks.org/"
                                               class="btn btn-success btn-sm">
                                               Read more...
                                            </a>
                                        </div>
                                    </div>
 
                                </li>
                                <li class="list-inline-item event-list">
                                    <div class="px-4">
 
                                        <h5 class="font-size-16 text-warning">
                                            GPL 2022
 
                                        </h5>
                                        <p class="text-muted">
                                            This contest is over now check 
                                            your result in the dashbord section.
                                        </p>
                                        <div>
                                            <a href="https://www.geeksforgeeks.org/"
                                               class="btn btn-success btn-sm">
                                               Read more...
                                            </a>
                                        </div>
                                    </div>
                                </li>
                                <li class="list-inline-item event-list">
                                    <div class="px-4">
 
                                        <h5 class="font-size-16 text-danger">
                                            GPL-2023
                                        </h5>
                                        <p class="text-primary">
                                            This contest is over we start the 
                                            prize distribution soon please check 
                                            what you earn.
                                        </p>
                                        <div>
                                            <a href="https://www.geeksforgeeks.org/"
                                               class="btn btn-success btn-sm">
                                               Read more...
                                            </a>
                                        </div>
                                    </div>
                                </li>
                                <li class="list-inline-item event-list">
                                    <div class="px-4">
 
                                        <h5 class="font-size-16 text-success">
                                            GPL 2024
                                        </h5>
                                        <p class="text-muted">
                                            This contest comming soon you can show 
                                            it in the geeksforgeeks portal.
                                        </p>
                                        <div>
                                            <a href=
                                             "https://www.geeksforgeeks.org/"
                                               class="btn btn-success btn-sm">
                                               Read more...
                                            </a>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
 
    <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js">
    </script>
</body>
 
</html>