A vertical left-right timeline in Bootstrap can be an effective way to visualize a series of events or milestones in chronological order. Its usage extends to various contexts, including project timelines, historical timelines, and personal achievements.
Syntax to create vertical left-right timeline:
<div class="timeline-container">
<div class="timeline-item left">
<!-- Left Content -->
</div>
<div class="timeline-item right">
<!-- Right Content -->
</div>
</div>
Approach to create vertical left-right timeline in Bootstrap:
- Integrate the Bootstrap using CDN Link. Then, create the basic structure of the project using various utility classes.
-
The timeline is structured using Bootstrap’s grid system within
container
androw
. The timeline items are placed withinul
the classtimeline
. -
Each timeline item is represented by an
li
element with the classtimeline-item
. These items alternate between left and right alignment using the classesleft
andright
. - Custom styling is applied using Bootstrap classes and custom CSS classes to achieve the desired appearance of the timeline, including background colors, borders, shadows, and spacing.
- Bootstrap utilities such as ‘left’ and ‘right’ classes manage the alignment, alternating the left-right flow of timeline items.
- Custom CSS classes, including ‘timeline-item’, ‘timeline-body’, and ‘timeline-content’, define the structure and appearance of timeline components.
Example: The illustration of a vertical left-right timeline in Bootstrap.
HTML
<!DOCTYPE html> < html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport"
content = "width=device-width, initial-scale=1.0" >
< title >Bootstrap Timeline</ title >
< link rel = "stylesheet" href =
< link rel = "stylesheet" href =
</ head >
< body >
< section class = "bsb-timeline-4 bg-success" >
< div class = "container" >
< div class = "row justify-content-center" >
< div class = "col-md-10" >
< ul class = "timeline" >
< li class = "timeline-item left" >
< div class = "timeline-body" >
< div class = "timeline-meta" >
< div class = "d-inline-flex" >
< span class = "text-light" >Released on 05 May 2022</ span >
</ div >
</ div >
< div class = "timeline-content" >
< div class = "card" >
< div class = "card-body p-xl-2" >
< h2 class = "card-title mb-4" >
Geeks for Geeks
</ h2 >
< p >
Intro and history: GeeksforGeeks (GFG) is a
computer science portal founded by Sandeep Jain
in 2009. It started as a blog to share computer
science concepts and has grown into a comprehensive
platform for learning and practicing coding. It is
based in Noida, Uttar Pradesh, India.
</ p >
</ div >
</ div >
</ div >
</ div >
</ li >
< li class = "timeline-item right" >
< div class = "timeline-body" >
< div class = "timeline-meta" >
< div class = "d-inline-flex" >
< span class = "text-light" >
Released on 18 Jan 2023
</ span >
</ div >
</ div >
< div class = "timeline-content" >
< div class = "card " >
< div class = "card-body p-xl-2" >
< h2 class = "card-title mb-4" >
Geeks for Geeks
</ h2 >
< p >
Intro and history: GeeksforGeeks (GFG) is a
computer science portal founded by Sandeep
Jain in 2009. It started as a blog to share
computer science concepts and has grown into a
comprehensive platform for learning and
practicing coding. It is based in Noida,
Uttar Pradesh, India..
</ p >
</ div >
</ div >
</ div >
</ div >
</ li >
< li class = "timeline-item left" >
< div class = "timeline-body" >
< div class = "timeline-meta" >
< div class = "d-inline-flex" >
< span class = "text-light" >
Released on 2 Feb 2024
</ span >
</ div >
</ div >
< div class = "timeline-content" >
< div class = "card " >
< div class = "card-body p-xl-2" >
< h2 class = "card-title mb-4" >
Geeks for Geeks
</ h2 >
< p >
Intro and history: GeeksforGeeks (GFG) is a
computer science portal founded by Sandeep
Jain in 2009. It started as a blog to share
computer science concepts and has grown into a
comprehensive platform for learning and
practicing coding. It is based in Noida,
Uttar Pradesh, India.
</ p >
</ div >
</ div >
</ div >
</ div >
</ li >
</ ul >
</ div >
</ div >
</ div >
</ section >
</ body >
</ html >
|
Output: