<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="card-group"> <div class="card card-outline-primary text-center"> <div class="card"> <div class="card-block"> <div class="date-box"> <div class="date-box-week"> <strong>Tue</strong> <div class="date-box-month">Jun</div> </div> <div class="date-box-day">6</div> <div style="height: 5px;"></div> </div> </div> </div> </div> <div class="card card-outline-primary text-center"> <div class="card"> <div class="card-block"> <div class="date-box"> <div class="date-box-week"> <strong>Tue</strong> <div class="date-box-month">Jun</div> </div> <div class="date-box-day">6</div> <div style="height: 5px;"></div> </div> </div> </div> </div> <div class="card card-outline-primary text-center"> <div class="card date-selected"> <div class="card-block"> <div class="date-box date-selected"> <div class="date-box-week"> <strong>Tue</strong> <div class="date-box-month">Jun</div> </div> <div class="date-box-day">6</div> <div style="height: 5px;"></div> </div> </div> </div> </div> <div class="card card-outline-primary text-center"> <div class="card"> <div class="card-block"> <div class="date-box"> <div class="date-box-week"> <strong>Tue</strong> <div class="date-box-month">Jun</div> </div> <div class="date-box-day">6</div> <div style="height: 5px;"></div> </div> </div> </div> </div> <div class="card card-outline-primary text-center"> <div class="card"> <div class="card-block"> <div class="date-box"> <div class="date-box-week"> <strong>Tue</strong> <div class="date-box-month">Jun</div> </div> <div class="date-box-day">6</div> <div style="height: 5px;"></div> </div> </div> </div> </div> <div class="card card-outline-primary text-center"> <div class="card"> <div class="card-block"> <div class="date-box"> <div class="date-box-week"> <strong>Tue</strong> <div class="date-box-month">Jun</div> </div> <div class="date-box-day">6</div> <div style="height: 5px;"></div> </div> </div> </div> </div> <div class="card card-outline-primary text-center"> <div class="card"> <div class="card-block"> <div class="date-box"> <div class="date-box-week"> <strong>Tue</strong> <div class="date-box-month">Jun</div> </div> <div class="date-box-day">6</div> <div style="height: 5px;"></div> </div> </div> </div> </div> <div class="card card-outline-primary text-center"> <div class="card"> <div class="card-block"> <div class="date-box"> <div class="date-box-week"> <strong>Tue</strong> <div class="date-box-month">Jun</div> </div> <div class="date-box-day">6</div> <div style="height: 5px;"></div> </div> </div> </div> </div> <div class="card card-outline-primary text-center"> <div class="card"> <div class="card-block"> <div class="date-box"> <div class="date-box-week"> <strong>Tue</strong> <div class="date-box-month">Jun</div> </div> <div class="date-box-day">6</div> <div style="height: 5px;"></div> </div> </div> </div> </div> </div>

.date-box { padding: 1px 12px 0; color: #00a287; } .date-box-week { line-height: 20px; display: inline-block; } .date-box-month { /*color: #00a287;*/ } .date-box-day { font-size: 44px; font-weight: 500; display: inline-block; margin-left: 3px; } .date-selected{ color: white; background-color: #00a287; } .card{ max-width:150px; } /* .card-columns { @include media-breakpoint-only(lg) { column-count: 4; } @include media-breakpoint-only(xl) { column-count: 5; } }