<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <section id="timeline" class="my-5"> <h1 class="display-4 text-center">A Clean Bootstrap Timeline</h1> <p class="lead text-center ">All cards must be the same height and width for space calculations on large screens.</p> <div class="tl-card-wrapper position-relative m-auto"> <div class="card position-relative d-block rounded bg-primary"> <div class="head text-white font-weight-light position-relative d-flex align-items-center"> <div class="number-box rounded d-inline float-left mx-3 my-1 px-2 h1"> <span>01</span> </div> <h2 class="text-uppercase m-0 font-weight-light"><span class="small d-block">Subtitle</span> Technology</h2> </div> <div class="bg-white border-right border-left border-bottom p-3"> <p class="mb-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta reiciendis deserunt doloribus consequatur, laudantium odio dolorum laboriosam.</p> </div> </div> <div class="card position-relative d-block rounded bg-success"> <div class="head text-white font-weight-light position-relative d-flex align-items-center"> <div class="number-box rounded d-inline float-left mx-3 my-1 px-2 h1"> <span>02</span> </div> <h2 class="text-uppercase m-0 font-weight-light"><span class="small d-block">Subtitle</span> Technology</h2> </div> <div class="bg-white border-right border-left border-bottom p-3"> <p class="mb-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta reiciendis deserunt doloribus consequatur, laudantium odio dolorum laboriosam.</p> <img src="http://placehold.it/1000x500" alt="Graphic"> </div> </div> <div class="card position-relative d-block rounded bg-dark"> <div class="head text-white font-weight-light position-relative d-flex align-items-center"> <div class="number-box rounded d-inline float-left mx-3 my-1 px-2 h1"> <span>03</span> </div> <h2 class="text-uppercase m-0 font-weight-light"><span class="small d-block">Subtitle</span> Technology</h2> </div> <div class="bg-white border-right border-left border-bottom p-3"> <p class="mb-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta reiciendis deserunt doloribus consequatur, laudantium odio dolorum laboriosam.</p> <img src="http://placehold.it/1000x500" alt="Graphic"> </div> </div> <div class="card position-relative d-block rounded bg-warning"> <div class="head text-white font-weight-light position-relative d-flex align-items-center"> <div class="number-box rounded d-inline float-left mx-3 my-1 px-2 h1"> <span>04</span> </div> <h2 class="text-uppercase m-0 font-weight-light"><span class="small d-block">Subtitle</span> Technology</h2> </div> <div class="bg-white border-right border-left border-bottom p-3"> <p class="mb-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta reiciendis deserunt doloribus consequatur, laudantium odio dolorum laboriosam.</p> <img src="http://placehold.it/1000x500" alt="Graphic"> </div> </div> </div> </section> </div>

body { background: #eee; } span.small { font-size:small; } @media (min-width: 1000px) { #timeline .card:nth-child(odd) .head::after, #timeline .card:nth-child(even) .head::after { position: absolute; content: ""; width: 0; height: 0; border-top: 15px solid transparent; border-bottom: 15px solid transparent; } #timeline .card:nth-child(odd) .head::before, #timeline .card:nth-child(even) .head::before { position: absolute; content: ""; width: 9px; height: 9px; background-color: #bdbdbd; border-radius: 9px; box-shadow: 0px 0px 2px 8px #eee; } } /* Some Cool Stuff */ .card:nth-child(n-1) { order: 1; } .card:nth-child(n) { order: 2; } @media (min-width: 1000px) { #timeline .tl-card-wrapper { display: flex; flex-flow: column wrap; width: 1170px; height: 1650px; margin: 0 auto; } } #timeline .tl-card-wrapper::after { z-index: 1; content: ""; position: absolute; top: 0; bottom: 0; left: 50%; border-left: 1px solid rgba(191, 191, 191, 0.4); } #timeline .card { max-width: 94%; z-index: 2; } @media (min-width: 480px) { #timeline .card { max-width: 60%; box-shadow: 0px 1px 22px 4px rgba(0, 0, 0, 0.07); } } @media (min-width: 720px) { #timeline .card { max-width: 40%; } } @media (min-width: 1000px) { #timeline .card { max-width: 450px; margin: 90px; margin-top: 45px; } #timeline .card:nth-child(odd) { margin-right: 45px; } #timeline .card:nth-child(odd) .head::after { border-left-width: 15px; border-left-style: solid; left: 100%; } #timeline .card:nth-child(odd) .head::before { left: 491.5px; } #timeline .card:nth-child(even) { margin-left: 45px; } #timeline .card:nth-child(even) .head::after { border-right-width: 15px; border-right-style: solid; right: 100%; } #timeline .card:nth-child(even) .head::before { right: 489.5px; } #timeline .card:nth-child(2) { margin-top: 180px; } } #timeline .number-box { background: rgba(0, 0, 0, 0.17); } #timeline img { display: block; width: 100%; }