Responsive Timeline In HTML CSS (Horizontal & Vertical)

Once upon a time, a student had to create a timeline in her project. She started strong with “it’s just a few containers placed side by side”, then surrendered the next day. Well, a timeline is slightly more than just “side by side containers”. Let Master Coffee walk you through some simple examples, let’s go.

 

CODE DOWNLOAD

I have released this under the MIT license, feel free to use it in your own project – Personal or commercial. Some form of credits will be nice though. 🙂

 

 

VIDEO TUTORIAL

 

1) HORIZONTAL TIMELINE

1A) THE DEMO

 

 

1B) THE HTML

<div class="hOut"><div class="hIn">
  <div class="event">
    <p class="eDate">12 Mar 2077 1:23</p>
    <p class="eTxt">Dogetor Dogetorius discovered a mysterious round object.</p>
  </div>
  <div class="event">
    <p class="eDate">12 Mar 2077 2:34</p>
    <p class="eTxt">The object is secured in the Dogetor's lab.</p>
  </div>
  <div class="event">
    <p class="eDate">12 Mar 2077 3:45</p>
    <p class="eTxt">The Dogetor carried out various "tests" and "experiments" on the round object.</p>
  </div>
  <div class="event">
    <p class="eDate">12 Mar 2077 4:56</p>
    <p class="eTxt">The mysterious object turns out to be what humans call a "ball".</p>
  </div>
</div></div>

• Begin by create 2 wrappers – <div class="hOut"><div class="hIn">.
• Insert the events – <div class="event">.
• Each event has a date <p class="eDate"> and the text itself <p class="eTxt">… Well, you can actually format this however you want.

 

 

1C) THE CSS

/* (PART A) WRAPPER */
.hOut { overflow-x: auto; }
.hIn {
  display: flex;
  padding-bottom: 10px; margin-bottom: 20px;
  border-bottom: 3px dotted #ffa5a5;
  min-width: fit-content; width: 100%;
}

/* (PART B) EVENTS */
.hIn .event {
  color: #fff; background: #921f1f;
  min-width: 200px; max-width: 300px;
  padding: 10px; margin: 10px; border-radius: 10px;
  position: relative;
}
.hIn .eDate { font-weight: 700; font-size: 18px; }
.hIn .eTxt { font-size: 14px; }

/* (PART C) TIMELINE SHARED */
.hIn .event::before, .hIn .event::after {
  position: absolute; content: "";
}

/* (PART D) TIMELINE CIRCLE */
.hIn .event::before {
  bottom: -30px; left: 50%;
  content: ""; width: 16px; height: 16px; border-radius: 50%;
  background: #ffa5a5;
}

/* (PART E) TIMELINE "T-CONNECTOR" */
.hIn .event::after {
  bottom: -20px; left: calc(50% + 6px);
  width: 1px; height: 20px;
  border-left: 3px dotted #ffa5a5;
}

• (A) First, flush the events into one single row with .hIn { display: flex }.
• (A) For responsive support, set the scrollbars on the outer wrapper – .hOut { overflow-x: auto; }.
• (A) Add some space at the bottom with padding-bottom and margin-bottom, draw the timeline with border-bottom.
• (B) Set the dimensions and cosmetics of the events.
• (B & C) For proper positioning – Set .hIn { position: relative } and .hIn .event::before, .hIn .event::after { position: absolute }
• (D) Use .event::before to add a “event circle” on the timeline.
• (E) Use .event::after to draw a “t-connecter” from the circle to the event.

 

 

2) VERTICAL TIMELINE

2A) THE DEMO

 

2B) THE HTML

<div class="vOut"><div class="vIn">
  <div class="event">
    <p class="eDate">12 Mar 2077 1:23</p>
    <p class="eTxt">Dogetor Dogetorius discovered a mysterious round object.</p>
  </div>
  <div class="event">
    <p class="eDate">12 Mar 2077 2:34</p>
    <p class="eTxt">The object is secured in the Dogetor's lab.</p>
  </div>
  <div class="event">
    <p class="eDate">12 Mar 2077 3:45</p>
    <p class="eTxt">The Dogetor carried out various "tests" and "experiments" on the round object.</p>
  </div>
  <div class="event">
    <p class="eDate">12 Mar 2077 4:56</p>
    <p class="eTxt">The mysterious object turns out to be what humans call a "ball".</p>
  </div>
</div></div>

Look no further, this is the exact same “double containers with events”.

 

 

2C) THE CSS

/* (PART A) WRAPPER */
.vOut { max-width: 500px; margin: 0 auto; }
.vIn {
  margin-left: 10px; padding-left: 20px; 
  border-left: 3px dotted #87ccff;
}

/* (PART B) EVENTS */
.vIn .event {
  color: #fff; background: #1170b7;
  padding: 10px; margin: 10px; border-radius: 10px;
  position: relative;
}
.vIn .eDate { font-weight: 700; font-size: 18px; }
.vIn .eTxt { font-size: 14px; }

/* (PART C) TIMELINE SHARED */
.vIn .event::before, .vIn .event::after {
  position: absolute; content: "";
}

/* (PART D) TIMELINE CIRCLE */
.vIn .event::before {
  left: -40px; top: 40%;
  content: ""; width: 16px; height: 16px; border-radius: 50%;
  background: #87ccff;
}

/* (PART E) TIMELINE "T-CONNECTOR" */
.vIn .event::after {
  left: -30px; top: calc(40% + 7px);
  width: 30px; height: 1px;
  border-top: 3px dotted #87ccff;
}

Once again, the idea behind the vertical timeline is almost the same. The only difference here is the position of the timeline.

 

 

THE END – ALTERNATING EVENTS?

That’s all for this tutorial and sharing. For those who are thinking of “alternating events”, it will be a painful “positioning trial-and-error”:

• Place the timeline in the middle.
• Restrict the width/height of the events accordingly.
• Play with the position of the events:
  • Horizontal timeline – Default top: 0, and top: calc(50% + X px) for all even children.
  • Vertical timeline – Default left: 0, and left: calc(50% + Y px) for all even children.

Yep, this will result in a very tight fit on the small mobile screens, I cannot recommend “alternating events”.

 

CHEAT SHEET