[How To] Einfache Timeline mit Bootsstrap 4

Ritzga

Ihr wolltest schon immer mal eine responsive Timeline, ohne dabei viel Zeit zu investieren? Dann seid ihr hier genau richtig!

Vorschau

HTML:

<ol class="list-unstyled ml-5 timeline">
    <li>
        <h5>test</h5>
        <p>
            
        </p>
    </li>
    <li>
        <h5>test</h5>
        <p>
            
        </p>
    </li>
    <li>
        <h5>test</h5>
        <p>

        </p>
        <p>
            
        </p>
    </li>
    <li>
        <h5>test</h5>
        <p>

        </p>
    </li>
</ol>

CSS:

.timeline:before, .timeline:after {
  content: "";
  background: #ffc107;
  width: 5px;
  height: 60px;
  position: absolute;
  z-index: 2;
  margin: 0 0 0 -1px;
}
.timeline:after {
  height: 90px;
  margin: -80px 0 0 -1px;
}
.timeline > li {
  border: 2px solid;
  border-color: #343a40 !important;
  margin: 0 0 -2px 0;
  padding: 30px;
  counter-increment: li;
  position: relative;
  width: 42rem;
}
.timeline > li:nth-child(odd):before, .timeline > li:nth-child(even):before {
  content: counter(li);
  display: flex;
  -ms-flex-pack: center !important;
  justify-content: center !important;
  -ms-flex-align: center !important;
  align-items: center !important;
  position: absolute;
  border-radius: 50%;
  height: 50px;
  width: 50px;
  background-color: #343a40;
  color: white;
  font-weight: bold;
  z-index: 3;
}
.timeline > li:nth-child(odd):before {
  right: 100%;
  margin-right: -25px;
}
.timeline > li:nth-child(even):before {
  left: 100%;
  margin-left: -25px;
}
.timeline > li:nth-child(odd) {
  border-right: none;
  border-left: 2px solid;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  margin-right: 30px;
  padding-right: 0;
}
.timeline > li:nth-child(even) {
  border-left: none;
  border-right: 2px solid;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  margin-left: 30px;
  padding-left: 0;
  text-align: right;
}
.timeline > li:first-child {
  border-top: none;
  border-top-right-radius: 0;
  border-top-left-radius: 0;
}
.timeline > li:last-child {
  border-bottom: none;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

Die Funktionsweise, ist dabei recht simpel. Es wird eine sorted List hierfür verwendet, welche gezielt die Zahlen formatiert und die Border-Eigenschaften an richtiger Stelle eingeblendet und gerundet werden.

Falls ihr Fragen, oder Verbesserungen habt, dann schreibt es mir!

Livecode
Schaut hier!

DerGothic

Danke fürs hochladen. Das ist ziemlich simpel aufgebaut und einfach zu verstehen. Das wäre evtl was für einen webbasierenden Chat oder für kommentieren.
Mit einem genauen Zeitstempel nahezu pefekt.

Ritzga

Ich habe mal einen Live-Code noch hinzugefügt.