<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"> <div class="grop-select"> <!------------------------------------------> <div class="item-select"> <div class="tab-item-select" id="show-01"> <i class="material-icons">stars</i> <label>Insight</label> </div> <div class="tab-item-show"> <div class="block-item-show"> <div class="detail-item-show"> </div> </div> </div> </div> <div class="item-select"> <div class="tab-item-select"> <i class="material-icons">info</i> <label>General Info.</label> </div> <div class="tab-item-show"> <div class="block-item-show"> <div class="detail-item-show"> </div> </div> </div> </div> <div class="item-select"> <div class="tab-item-select"> <i class="material-icons">directions_transit</i> <label>Transportation</label> </div> <div class="tab-item-show"> <div class="block-item-show"> <div class="detail-item-show"> </div> </div> </div> </div> <div class="item-select"> <div class="tab-item-select"> <i class="material-icons">hotel</i> <label>Accommodation</label> </div> <div class="tab-item-show"> <div class="block-item-show"> <div class="detail-item-show"> </div> </div> </div> </div> <div class="item-select"> <div class="tab-item-select"> <i class="material-icons">stars</i> <label>Insight</label> </div> <div class="tab-item-show"> <div class="block-item-show"> <div class="detail-item-show"> </div> </div> </div> </div> <div class="item-select"> <div class="tab-item-select"> <i class="material-icons">info</i> <label>General Info.</label> </div> <div class="tab-item-show"> <div class="block-item-show"> <div class="detail-item-show"> </div> </div> </div> </div> <div class="item-select"> <div class="tab-item-select"> <i class="material-icons">directions_transit</i> <label>Transportation</label> </div> <div class="tab-item-show"> <div class="block-item-show"> <div class="detail-item-show"> </div> </div> </div> </div> <div class="item-select"> <div class="tab-item-select"> <i class="material-icons">hotel</i> <label>Accommodation</label> </div> <div class="tab-item-show"> <div class="block-item-show"> <div class="detail-item-show"> </div> </div> </div> </div> <!------------------------------------------> </div> </div>

@import url('https://fonts.googleapis.com/icon?family=Material+Icons'); body{ padding:5%; background:#eeeeee; } .grop-select{ display:grid; grid-template-columns: auto auto auto auto; } .grop-select .item-select .tab-item-select{ cursor: pointer; display:grid; grid-template-columns: auto auto; padding-top: 40px; padding-bottom: 10%; border-bottom: 6px solid transparent; } .grop-select .item-select .tab-item-select i{ cursor: pointer; font-size:40px; color:#19387d; border-bottom: 6px solid transparent; } .grop-select .item-select .tab-item-select label{ cursor: pointer; font-weight: bold; font-style: normal; font-stretch: normal; line-height: 1.2; letter-spacing: 1px; text-align: left; color: #19387d; font-size: 20px; margin-left:-60px; padding-top:3%; padding-left: 0; padding-right: 0; } /*---------------- show ------------- */ .grop-select .item-select .tab-item-show{ display: none; } .grop-select .item-select .tab-item-show .block-item-show{ display: block; clear: both; height: 525px; } .grop-select .item-select .tab-item-show .block-item-show .detail-item-show{ position: absolute; background: white; display: block; left: 0; right: 0; height: 525px; }