Timeline Code

<div class="container">
    <div class="row">
        <div class="text-primary">
            <h1>Horizontal timeline</h1>
        </div><br><br>

    <div class="col-md-12">
      <!--LIGHT BOX-->
          <div class="card rounded-0 border-0 bg-faded p-3">
            <h4 class="timeline-title text-warning">Mussum ipsum cacilds 1</h4>
            <div><hr class="my-1"></div>

            <div><p>Mussum ipsum cacilds, vidis litro abertis. Consetis faiz elementum girarzis, nisi eros gostis.</p></div>

            <p><small class="text-muted"><i class="far fa-hourglass"></i> 11 hours ago via Twitter</small></p>
            </div>
      <!--DARK BOX-->
            <div class="card rounded-0 border-0 p-3">
            <h4 class="timeline-title text-danger">Mussum ipsum cacilds 1</h4>
            <div><hr class="my-1"></div>

            <div><p>Mussum ipsum cacilds, vidis litro abertis. Consetis faiz elementum girarzis, nisi eros gostis.</p></div>

            <p><small class="text-muted"><i class="far fa-hourglass"></i> 11 hours ago via Twitter</small></p>
          </div>
      <!--LIGHT BOX-->
          <div class="card rounded-0 border-0 bg-faded p-3">
            <h4 class="timeline-title text-warning">Mussum ipsum cacilds 1</h4>
            <div><hr class="my-1"></div>

            <div><p>Mussum ipsum cacilds, vidis litro abertis. Consetis faiz elementum girarzis, nisi eros gostis.</p></div>

            <p><small class="text-muted"><i class="far fa-hourglass"></i> 11 hours ago via Twitter</small></p>
            </div>
      <!--DARK BOX-->
            <div class="card rounded-0 border-0 p-3">
            <h4 class="timeline-title text-danger">Mussum ipsum cacilds 1</h4>
            <div><hr class="my-1"></div>

            <div><p>Mussum ipsum cacilds, vidis litro abertis. Consetis faiz elementum girarzis, nisi eros gostis.</p></div>

            <p><small class="text-muted"><i class="far fa-hourglass"></i> 11 hours ago via Twitter</small></p>
          </div>
      <!--LIGHT BOX-->
          <div class="card rounded-0 border-0 bg-faded p-3">
            <h4 class="timeline-title text-warning">Mussum ipsum cacilds 1</h4>
            <div><hr class="my-1"></div>

            <div><p>Mussum ipsum cacilds, vidis litro abertis. Consetis faiz elementum girarzis, nisi eros gostis.</p></div>

            <p><small class="text-muted"><i class="far fa-hourglass"></i> 11 hours ago via Twitter</small></p>
            </div>
      <!--DARK BOX-->
            <div class="card rounded-0 border-0 p-3">
            <h4 class="timeline-title text-danger">Mussum ipsum cacilds 1</h4>
            <div><hr class="my-1"></div>

            <div><p>Mussum ipsum cacilds, vidis litro abertis. Consetis faiz elementum girarzis, nisi eros gostis.</p></div>

            <p><small class="text-muted"><i class="far fa-hourglass"></i> 11 hours ago via Twitter</small></p>
          </div>

        </div>
    </div>
</div>