// Adapted for Bootstrap 4 from https://www.bootply.com/SzXin8KDZJ. $card-shadow: rgba(0, 0, 0, .175); .timeline { list-style: none; padding: 10px 0; position: relative; &::before { top: 0; bottom: 0; position: absolute; content: ' '; width: 3px; background-color: theme-color('primary'); left: 50%; margin-left: -1.5px; } li { margin-bottom: 10px; position: relative; &::before { content: ' '; display: table; } &::after { content: ' '; display: table; clear: both; } .card { width: 47%; float: left; position: relative; box-shadow: 0 1px 6px $card-shadow; &::before { position: absolute; top: 26px; right: -15px; display: inline-block; border-top: 15px solid transparent; border-left: 15px solid theme-color('dark'); border-right: 0 solid theme-color('dark'); border-bottom: 15px solid transparent; content: ' '; } &::after { position: absolute; top: 27px; right: -14px; display: inline-block; border-top: 14px solid transparent; border-left: 14px solid theme-color('dark'); border-right: 0 solid theme-color('dark'); border-bottom: 14px solid transparent; content: ' '; } } &.timeline-inverted { .card { float: right; &::before { border-left-width: 0; border-right-width: 15px; left: -15px; right: auto; } &::after { border-left-width: 0; border-right-width: 14px; left: -14px; right: auto; } } } .timeline-badge { color: $white; width: 50px; height: 50px; line-height: 50px; font-size: 1.4em; text-align: center; position: absolute; top: 16px; left: 50%; margin-left: -25px; background-color: theme-color('dark'); z-index: 100; border-radius: 50%; .arrow { color: $white; width: 50px; height: 50px; line-height: 50px; font-size: 1.4em; text-align: center; position: absolute; top: 26px; left: 50%; margin-left: -25px; background-color: theme-color('dark'); z-index: 100; border-radius: 50%; } } } } @media (max-width: 767px) { .timeline { &::before { left: 40px; } li { .card { float: right; width: calc(100% - 90px); &::before { border-left-width: 0; border-right-width: 15px; left: -15px; right: auto; } &::after { border-left-width: 0; border-right-width: 14px; left: -14px; right: auto; } } .timeline-badge { left: 15px; margin-left: 0; top: 16px; } } } }