Mile Mijatovic Mile Mijatovic - 4 months ago 68
Javascript Question

css - bootstrap vertical timeline separated with event dots

what if we want to create vertical timeline separated by dots up and down, provided that we have background image, not just color? I am trying to create one beautiful website template from psd template, but I have little problem because I can't do timeline like this - http://prntscr.com/c14q9c

I know, when we have background color, for example white, to separate dots up and down, everything we need to do is to add a border color same as background color, around the dot.

But this is a little more specific, you will agree?

This is live example (I was trying to use :before and :after), please take a look at code - http://mile.x3.rs/mile/photo-folio/

Answer

It is not very difficult to accomplish you can use before and after to create the circles applying them to each segment as you can see in this Demo.

You just have to play with the values and classes to create the timeline you need.

HTML:

<div class="bg">
  <div class="segment"></div>
  <div class="segment"></div>
  <div class="segment"></div>
</div>

SCSS:

.bg {
  align-items: center;
  background-color: #000;
  display: flex;
  flex-direction: column;
  height: 100vh;
  justify-content: center;
  width: 100vw;
}

.segment {
  background-color: #fff;
  height: 60px;
  margin-bottom: 16px;
  position: relative;
  width: 4px;

  &:first-child::before {
    border: 4px solid #fff;
    border-radius: 10px;
    content: '';
    height: 10px;
    left: -7px;
    position: absolute;
    top: -17px;
    width: 10px;
  }

  &::after {
    background-color: #fff;
    border-radius: 8px;
    bottom: -16px;
    content: '';
    height: 8px;
    margin: 4px;
    position: absolute;
    right: -6px;
    width: 8px;
  }
}