Simple Vertical Timeline in Bootstrap

Simple Vertical Timeline in Bootstrap
Code Snippet:Simple Bootstrap Timeline
Author: John Brown
Published: January 11, 2024
Last Updated: January 22, 2024
Downloads: 1,332
License: MIT
Edit Code online: View on CodePen
Read More

This code showcases a simple vertical timeline implemented using Bootstrap. The timeline is designed to display chronological events or milestones with corresponding date details. It consists of alternating left and right sections, each representing a specific event.

It is helpful for you if you need a simple and visually appealing way to display a sequence of events, such as career milestones, project timelines, or historical events. By integrating this code into a web page, you can create an organized and visually appealing presentation of chronological data.

How to Create Simple Vertical Timeline In Bootstrap

1. First of all, load the Bootstrap CSS and Google Fonts by adding the following CDN links to the head tag of your website project.

<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css'>
<link href="https://fonts.googleapis.com/css?family=Amiko:600" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Work+Sans" rel="stylesheet">

2. To create a vertical timeline, follow the HTML structure provided below and insert your events accordingly. Each event consists of a left and a right section, along with the corresponding date and details.

Simply duplicate the “Event 1” and “Event 2” sections as needed and update the content to showcase your own events in the timeline.

 <div class="container" id="timeline">
        <div id="timeline-header">
          <h1>TIMELINE</h1>
        </div>
        <div class="col-xs-6" id="start-left">

        </div>
        <div class="col-xs-6" id="start-right">
        </div>
        <div class="col-xs-6 time-left">
          <div class="date">
            <h1>2016</h1>
          </div>
          <div class="date-details">
            <h3>Job Title</h3>
            <p>February 2015 - Present</p>
          </div>
          <div class="inner-left">
          </div>
        </div>

        <div class="col-xs-6 time-right">
        </div>
        <!-- Break -->
        <div class="col-xs-6 time-left">
        </div>

        <div class="col-xs-6 time-right">
          <div class="date">
            <h2>2014</h2>
          </div>
          <div class="date-details">
            <h3>Job Title</h3>
            <p>January 2014 - February 2015</p>
          </div>
          <div class="inner-right">
          </div>
        </div>
        <!-- Break -->
        <div class="col-xs-6 time-left">
          <div class="date">
            <h2>2013</h2>
          </div>
          <div class="date-details">
            <h3>Job Title</h3>
            <p>March 2013 - January 2016</p>
          </div>
          <div class="inner-left">
          </div>
        </div>

        <div class="col-xs-6 time-right">
        </div>
    </div>

3. Use the following CSS code to style the timeline. You can modify these styles to match your desired theme or design. Additionally, you can experiment with other CSS properties to further customize the layout and appearance of the vertical timeline.

/* Fonts */
h1, h2, h3, h4 {
  font-family: 'Amiko', sans-serif !important;
}

p {
  font-family: 'Work Sans', sans-serif !important;
}


#timeline {
  position: relative;
  height: 100%;
  padding: 0 0 40px;
  background-color: #272727;
  
}

#timeline-header{
  position: relative;
  text-align: center;
  border-width: 4px;
  border-color: #fff;
  color: #fff;
  text-align: center;
  padding-top: 40px;
}


#start-left {
  position: relative;
  left: 0;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  border-radius: 0 60px 0 0;
  height: 80px;
  background-color: #272727;
}

#start-right {
  position: relative;
  right: 0;
  border-top: 2px solid #fff;
  border-left: 2px solid #fff;
  border-radius: 60px 0 0 0;
  height: 80px;
  background-color: #272727;
}

/* Left side */

.time-left {
  border-right: 2px solid #fff;
  height: 200px;
  color: #fff;
  padding: 0 15px 0 0;
  text-align: right;
}

.time-left .date {
  width: 100%;
  padding-right: 15px;
}

.inner-left {
  width: 20px;
  height: 95%;
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 0;
  margin: 0;
  border-top: 4px solid #fff;
  border-color: #fff;
}

/* Right Side */

.time-right {
  border-left: 2px solid #fff;
  height: 200px;
  color: #fff;
  padding: 0 0 0 15px;
  text-align: left;
}

.inner-right {
  width: 20px;
  height: 95%;
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 0;
  margin: 0;
  border-top: 4px solid #fff;
  border-color: #fff;
}

.time-right .date {
  width: 100%;
  padding-left: 15px;
}

/* Media query to help keep the Job Titles from overflowing */

@media only screen and (max-width: 750px) {

  .date-details h3 {
    font-size: 1.35rem;
  }

}

That’s it! I hope you’ve successfully created the Simple Vertical Timeline in Bootstrap. If you have any questions or suggestions, please feel free to comment below.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...