Open In App

How to create vertical left-right timeline in Bootstrap ?

Last Updated : 04 Mar, 2024
Improve
Improve
Like Article
Like
Save
Share
Report

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 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: 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:


timelinegif
Output


                                 


                            

                                

                                    Like Article
                                    
                                

                                

                                    
                                    

                                        
                                        Suggest improvement
                                    

                                

                            


                            

                                                            

                                    
                                        
                                        Previous
                                    
                                    
                                    

                                        How to make Responsive Carousel in Bootstrap ?
                                    

                                

                                                            

                                    
                                        Next
                                        
                                    
                                    
                                    

                                        How to Remove Keys from a TypeScript Dictionary ?
                                    

                                

                                                        

                            
    

        

            Share your thoughts in the comments
        

        
    
                            

            

                

                    

                    
                
 
                
    
                            

                                

                            


                            


            

        
 
                        

                                                

                        
                                                    

                                

                                    Similar Reads                                    
                                

                                
      
                                    
        
            

                How to Make Responsive Vertical Timeline Design using only HTML and CSS ?
            

        
    
        
            

                How to Create a Horizontal Timeline in Bootstrap ?
            

        
    
        
            

                Angular PrimeNG Timeline Left Align
            

        
    
        
            

                Angular PrimeNG Timeline Right Align
            

        
    
        
            

                .pull-left and .pull-right classes in Bootstrap 4
            

        
    
        
            

                How to Left & Right Align Text within a Div in Bootstrap ?
            

        
    
        
            

                How to create a tabbed pills and vertical pills navigation menu in Bootstrap ?
            

        
    
        
            

                How to create a vertical or basic form using Bootstrap ?
            

        
    
        
            

                How to create timeline using CSS?
            

        
    
        
            

                How to create Timeline Animations using Anime.js ?
            

        
                                    

                            

                                                                        

                                

                                    
                                                                    

                            


                        

                        

                            

                                

                                    

                                        
author
        

            
        

        

                                    


                                    

                                        dhanushrajsrmq47                                

                            

                            

            
                                

                            

                                                                    

                                        
Article Tags : 

                                        
                                    

                                                                                            

                                                                                    

                              

                            

                                                        
                        

                    

                

            

        
        


        

                


			
		
		                
        

    

    

        

            

            

        

    












	

    
  

  
  








    
        We use cookies to ensure you have the best browsing experience on our website. By using our site, you
        acknowledge that you have read and understood our
        Cookie Policy &
        Privacy Policy
            
    







   Lightbox