<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 ----------> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <div class="container"> <h2>Month Picker Html template</h2> <div class="row"> <div class="col-12 col-md-6 col-lg-4 col-xl-3"> <div class="monthPicker"> <div class="monthPicker-top"> <button class="monthPicker-top-action btn"> <span class="fa fa-angle-left"></span> </button> <button class="monthPicker-top-current btn"> <span class="currentYear">Year 2017</span> <span class="selectYear">Jump Years</span> </button> <button class="monthPicker-top-action btn"> <span class="fa fa-angle-right"></span> </button> </div> <div class="monthPicker-body"> <a href="#" class="monthPicker-body-month"><span>Jan.</span></a> <a href="#" class="monthPicker-body-month"><span>Feb.</span></a> <a href="#" class="monthPicker-body-month"><span>Mar.</span></a> <a href="#" class="monthPicker-body-month"><span>Apr.</span></a> <a href="#" class="monthPicker-body-month"><span>May</span></a> <a href="#" class="monthPicker-body-month"><span>June</span></a> <a href="#" class="monthPicker-body-month"><span>July</span></a> <a href="#" class="monthPicker-body-month"><span>Aug.</span></a> <a href="#" class="monthPicker-body-month"><span>Sep.</span></a> <a href="#" class="monthPicker-body-month"><span>Oct.</span></a> <a href="#" class="monthPicker-body-month"><span>Nov.</span></a> <a href="#" class="monthPicker-body-month"><span>Dec.</span></a> </div> </div> </div> </div> </div>

.monthPicker { background: #33a0a0; box-shadow: 0 1px 5px #696969; } .monthPicker-top { display: -webkit-box; display: -ms-flexbox; display: flex; padding: 20px 20px; border-bottom: 1px solid #fff; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .monthPicker-top-action { font-size: 2rem; position: relative; width: 45px; height: 45px; color: #fff; border-radius: 50%; background: none; } .monthPicker-top-action span { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .monthPicker-top-action:hover { background: rgba(0, 0, 0, .1); } .monthPicker-top-current { color: #008080; background: #fff; } .monthPicker-top-current .selectYear { display: none; } .monthPicker-top-current:hover .currentYear { display: none; } .monthPicker-top-current:hover .selectYear { display: inline; } .monthPicker-body { display: -webkit-box; display: -ms-flexbox; display: flex; padding: 1rem; text-align: center; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-pack: distribute; justify-content: space-around; } .monthPicker-body-month { line-height: 35px; height: 35px; margin: 5px; vertical-align: middle; text-decoration: none; color: #008080; color: #fff; border-radius: 3px; background: #fff; background: none; -webkit-box-flex: 0; -ms-flex: 0 0 calc(100% / 3 - 10px); flex: 0 0 calc(100% / 3 - 10px); } .monthPicker-body-month:hover { text-decoration: none; color: #008080; background: #fff; box-shadow: 0 1px 5px rgba(0, 0, 0, .34); }