Simple Vertical Timeline in Bootstrap

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.

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.