Categories
28°C, New York
Home Bootstrap Approach to create vertical left-right timeline in Bootstrap

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 and row. The timeline items are placed within ul the class timeline.
  • Each timeline item is represented by an li element with the class timeline-item. These items alternate between left and right alignment using the classes left and right.
  • 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=
"https://unpkg.com/bootstrap@5.3.2/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href=
"https://unpkg.com/bs-brain@2.0.3/tutorials/timelines/timeline-4/assets/css/timeline-4.css">
</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: w3wiki (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: w3wiki (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: w3wiki (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:

													
													
												

												
												

													
													
Output

													
													
												

												
												

													
													

													
													
												

												
												

													
													

													
													
												

												
												

													
													

													
													
												

												
											

											
											

												
How to create vertical left-right timeline in Bootstrap ?

												
												

													
													
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>

													
													
												

												
											

										


										
										

											
Similar Reads

											
											

												
													

														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 and row. The timeline items are placed within ul the class timeline.
Each timeline item is represented by an li element with the class timeline-item. These items alternate between left and right alignment using the classes left and right.
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....
													

												
											

											
										


									

									

										
Tags:

										
										#Bootstrap-Questions
										
										#Bootstrap
										
										#Web Technologies