How to Create a Horizontal Timeline in Bootstrap ?
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:
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 > 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 > 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 > 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 w3wiki portal. </ p > < div > < a href = 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 > |
Output:
Contact Us