Simple Pure CSS Responsive Timeline (Free Download)

Welcome to a tutorial and example of how to create a simple vertical timeline using pure CSS. Yes, there is a ton of timeline plugins on the Internet, but nothing beats having the knowledge to build one yourself and the power to style as you please. So here it is, let us walk through a lightweight pure CSS timeline in this guide – Read on!

 

 

TABLE OF CONTENTS

 

DOWNLOAD & NOTES

Here is the download link to the example code, so you don’t have to copy-paste everything.

 

EXAMPLE CODE DOWNLOAD

Click here to download. I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

SORRY FOR THE ADS...

But someone has to pay the bills, and sponsors are paying for it. I insist on not turning Code Boxx into a "paid scripts" business, and I don't "block people with Adblock". Every little bit of support helps.

Buy Me A Coffee Code Boxx eBooks

 

 

VERTICAL TIMELINE

All right, let us now get started with the responsive vertical timeline.

 

TUTORIAL VIDEO

 

VERTICAL TIMELINE DEMO

11 Mar 2237 12:34

Evil Cates invaded planet Doge.

12 Mar 2237 14:23

Cates ate Doge food.

13 Mar 2237 20:12

Cates took over the Doge beds.

14 Mar 2237 08:11

Hoomans to the rescue.

15 Mar 2237 14:27

Evil cates gone. Victory for good boys and girls.

 

THE HTML

vertical-timeline.html
<div class="vtl">
  <div class="event">
    <p class="date">11 Mar 2237 12:34</p>
    <p class="txt">Evil Cates invaded planet Doge.</p>
  </div>
  <div class="event">
    <p class="date">12 Mar 2237 14:23</p>
    <p class="txt">Cates ate Doge food.</p>
  </div>
  <div class="event">
    <p class="date">13 Mar 2237 20:12</p>
    <p class="txt">Cates took over the Doge beds.</p>
  </div>
  <div class="event">
    <p class="date">14 Mar 2237 08:11</p>
    <p class="txt">Hoomans to the rescue.</p>
  </div>
  <div class="event">
    <p class="date">15 Mar 2237 14:27</p>
    <p class="txt">Evil cates gone. Victory for good boys and girls.</p>
  </div>
</div>

There is nothing “special” with the HTML, just need to create the container and events accordingly.

  • Start by creating a <div class="vtl"> container to put all the events in.
  • Sandwich the events <div class="event"> inside the container.
  • Finally, insert the <p class="date"> timestamp and the <p class="txt"> event itself.

That’s all.

 

 

THE CSS

vertical-timeline.css
/* (A) CONTAINER & SHARED */
.vtl, .vtl * {
  font-family: 'Courier New', Courier, monospace;
  box-sizing: border-box;
}
.vtl {
  padding-left: 50px; /* "reserve space" for vertical line */
  max-width: 600px; /* optional */
}
.vtl, .event { position: relative; } /* required for absolute position to work properly */
.vtl::before, .event::before, .event::after { position: absolute; }
 
/* (B) VERTICAL LINE */
.vtl::before {
  /* (B1) DRAW VERTICAL LINE */
  content: ""; width: 5px;
  background: #a9a9a9;
 
  /* (B2) POSITION TO THE LEFT */
  top: 0; bottom: 0; left: 15px;
}
 
/* (C) EVENTS */
.event {
  padding: 20px; margin-bottom: 10px; border-radius: 5px;
  background: #b52929;
}
.event p {
  padding: 0; margin: 0;
  color: #fff;
}
p.date { font-size: 1.1em; font-weight: 700; }
p.txt { font-size: 0.9em; }
 
/* (D) CIRCLE ON VERTICAL LINE */
.event::after {
  /* (D1) DRAW CIRCLE */
  content: ""; width: 16px; height: 16px; border-radius: 50%;
  border: 4px solid #b52929;
  background: #fff;
 
  /* (D2) POSITION ON VERTICAL LINE */
  top: 20%; left: -44px;
}
 
/* (E) EVENT "SPEECH BUBBLE CALLOUT" */
.event::before {
  /* (E1) DRAW TRIANGLE */
  content: "";
  border: 10px solid transparent; 
  border-right-color: #b52929;
  border-left: 0;
 
  /* (E2) POSITION TO THE LEFT */
  top: 20%; left: -10px;
}

This may look intimidating to beginners, but it’s easier to study in the following order.

  • (C) Straightforward, we are just turning <div class="event"> into “rectangle boxes” here.
  • (A & B) We “reserve” some space on the left side of the container using .vtl { padding-left: 50px }. Then, draw the vertical line using .vtl::before.
  • (D) Use .event::after to draw the “event circle on the timeline”.
  • (E) To turn the “rectangle event box” into a “speech callout”, we add a triangle on the left side.

If you are wondering how the circle magically appears, and border can transform into a triangle – See the extras section below.

 

 

 

ALTERNATE VERTICAL TIMELINE

Now that you know how to create a vertical timeline, here is an alternate version with the vertical line in the center instead.

 

ALTERNATE TIMELINE DEMO

11 Mar 2237 12:34

Evil Cates invaded planet Doge.

12 Mar 2237 14:23

Cates ate Doge food.

13 Mar 2237 20:12

Cates took over the Doge beds.

14 Mar 2237 08:11

Hoomans to the rescue.

15 Mar 2237 14:27

Evil cates gone. Victory for good boys and girls.

 

THE HTML

alt-vertical-timeline.html
<div class="alt-vtl">
  <div class="alt-event">
    <p class="date">11 Mar 2237 12:34</p>
    <p class="txt">Evil Cates invaded planet Doge.</p>
  </div>
  <div class="alt-event">
    <p class="date">12 Mar 2237 14:23</p>
    <p class="txt">Cates ate Doge food.</p>
  </div>
  <div class="alt-event">
    <p class="date">13 Mar 2237 20:12</p>
    <p class="txt">Cates took over the Doge beds.</p>
  </div>
  <div class="alt-event">
    <p class="date">14 Mar 2237 08:11</p>
    <p class="txt">Hoomans to the rescue.</p>
  </div>
  <div class="alt-event">
    <p class="date">15 Mar 2237 14:27</p>
    <p class="txt">Evil cates gone. Victory for good boys and girls.</p>
  </div>
</div>

Yep, the HTML in this alternate version is the same as previously – The difference is in the CSS.

 

 

THE CSS

alt-vertical-timeline.css
/* (A) CONTAINER & SHARED */
.alt-vtl, .alt-vtl * {
  font-family: 'Courier New', Courier, monospace;
  box-sizing: border-box;
}
.alt-vtl {
  margin: 0 auto; /* horizontally centered */
  max-width: 600px; /* optional */
}
.alt-vtl, .alt-event { position: relative; } /* required for absolute position to work properly */
.alt-vtl::before, .alt-event::before, .alt-event::after { position: absolute; }

/* (B) VERTICAL LINE */
.alt-vtl::before {
  /* (B1) DRAW VERTICAL LINE */
  content: ""; width: 5px;
  background: #a9a9a9;

  /* (B2) POSITION IN THE MIDDLE */
  top: 0; bottom: 0; left: 50%;
}

/* (C) EVENTS */
.alt-event {
  width: 45%;
  padding: 20px; margin-bottom: 10px; border-radius: 5px;
  background: #296eb5;
}
.alt-event:nth-child(even) { left: 55%; } /* alternate right */
.alt-event p {
  padding: 0; margin: 0;
  color: #fff;
}
p.date { font-size: 1.1em; font-weight: 700; }
p.txt { font-size: 0.9em; }

/* (D) CIRCLE ON VERTICAL LINE */
.alt-event::after {
  /* (D1) DRAW CIRCLE */
  content: ""; width: 16px; height: 16px; border-radius: 50%;
  border: 4px solid #296eb5;
  background: #fff;

  /* (D2) POSITION ON VERTICAL LINE */
  top: 20%; left: 107%;
}
.alt-event:nth-child(even)::after { left: -15%; } /* alternate */

/* (E) EVENT "SPEECH BUBBLE CALLOUT" */
.alt-event::before {
  /* (E1) DRAW TRIANGLE */
  content: "";
  border: 10px solid transparent; 
  border-left-color: #296eb5;
  border-right: 0;

  /* (E2) POSITION TO THE RIGHT */
  top: 20%; left: 100%;
}

/* (E3) ALTERNATE */
.alt-event:nth-child(even)::before {
  border-right: 10px solid #296eb5;
  border-left: 0;
  left: auto; right: 100%;
}

Yikes. This looks like brain damage material, but it is just a slightly modified version of the earlier one:

  • (C) Same old “turn <div class="alt-event"> into a rectangle box”.
    • But take note, there is a width: 45% to occupy half-ish of the container.
    • By default, the event will be on the left, for every alternate entry, we use left: 55% to offset the event to the right.
  • (A & B) Same old strategy to use .alt-vtl::before to draw the vertical timeline. But we use left: 50% to position it in the middle of the container instead.
  • (D & E) Same old speech callout and “circle on the timeline”, just different positioning.

 

 

EXTRAS

That’s all for the main tutorial, and here is a small section on some extras and links that may be useful to you.

 

CSS “MAGIC CIRCLE”

  • Define same width and height, this turns into a square.
  • Just add border-radius: 50%, effectively turns into a circle.

 

CSS “MAGIC TRIANGLE”

  • The above has border: 20px solid. Left is red, top is green, right is blue, and bottom is yellow.
  • Notice how the borders cut at 45 degrees? To create a “left triangle”:
    • We set transparent top and bottom borders.
    • No border on the left.
    • Set a solid right border.

 

LINKS & REFERENCES

 

THE END

Thank you for reading, and we have come to the end of this guide. I hope that it has helped you with your project, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!

2 thoughts on “Simple Pure CSS Responsive Timeline (Free Download)”

  1. Thanks a lot for this, I added this small piece which worked for me. It just hides the speech bubble triangles and circles on the vertical line, then extends each speech bubble to be full length. It ends up working nicely for smaller screens, it just stacks the speech bubbles along the center line. Figured I’d share (don’t mind the format).

    @media screen and (max-width: 600px) {
    div.ewrap {width: 100%;}
    div.right {left: 0%;}
    div.ewrap::before {display: none;}
    div.ewrap::after {display: none;}
    }

Leave a Comment

Your email address will not be published. Required fields are marked *