<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 ----------> <h2 class="text-center text-muted py-3">Moja oś czasu</h2> <div class="container py-2 mt-4 mb-4"> <div class="row no-gutters"> <div class="col-sm"></div> <div class="col-sm-1 text-center flex-column d-none d-sm-flex"> <div class="row h-50"> <div class="col"> </div> <div class="col"> </div> </div> <h5 class="m-2"> <span class="badge badge-pill bg-light border"> </span> </h5> <div class="row h-50"> <div class="col border-right"> </div> <div class="col"> </div> </div> </div> <div class="col-sm py-2"> <div class="card"> <div class="card-body"> <div class="float-right text-muted small">14 stycznia 1997</div> <h4 class="card-title text-muted">Urodziny</h4> <p class="card-text">Urodziłem się.</p> </div> </div> </div> </div> <div class="row no-gutters"> <div class="col-sm py-2"> <div class="card border-success shadow"> <div class="card-body"> <div class="float-right text-success small">14 stycznia 1998</div> <h4 class="card-title text-warning">Pierwsze urodziny</h4> <p class="card-text">Skończyłem jeden rok.</p> </div> </div> </div> <div class="col-sm-1 text-center flex-column d-none d-sm-flex"> <div class="row h-50"> <div class="col border-right"> </div> <div class="col"> </div> </div> <h5 class="m-2"> <span class="badge badge-pill bg-success"> </span> </h5> <div class="row h-50"> <div class="col border-right"> </div> <div class="col"> </div> </div> </div> <div class="col-sm"> </div> </div> <div class="row no-gutters"> <div class="col-sm"> </div> <div class="col-sm-1 text-center flex-column d-none d-sm-flex"> <div class="row h-50"> <div class="col border-right"> </div> <div class="col"> </div> </div> <h5 class="m-2"> <span class="badge badge-pill border bg-success"> </span> </h5> <div class="row h-50"> <div class="col border-right"> </div> <div class="col"> </div> </div> </div> <div class="col-sm py-2"> <div class="card border-success shadow"> <div class="card-body "> <div class="float-right text-muted small">Wrzesień 2001</div> <h4 class="card-title">Rozpocząłem naukę w szkole</h4> <p>Mój pierwszy dzień w szkole</p> </div> </div> </div> </div> <div class="row no-gutters"> <div class="col-sm py-2"> <div class="card"> <div class="card-body"> <div class="float-right text-muted small">14 stycznia 2015</div> <h4 class="card-title">Moja osiemnastka</h4> <p>Ukończyłem 18 lat.</p> </div> </div> </div> <div class="col-sm-1 text-center flex-column d-none d-sm-flex"> <div class="row h-50"> <div class="col border-right"> </div> <div class="col"> </div> </div> <h5 class="m-2"> <span class="badge badge-pill bg-light border"> </span> </h5> <div class="row h-50"> <div class="col"> </div> <div class="col"> </div> </div> </div> <div class="col-sm"> </div> </div> </div>