<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="row"> <div class="widget-boxed"> <div class="widget-boxed-header"> <h4><i class="ti-time padd-r-10"></i>Opening Hours</h4> </div> <div class="widget-boxed-body"> <div class="side-list"> <ul> <li>Monday <span>9 AM - 5 PM</span></li> <li>Tuesday <span>9 AM - 5 PM</span></li> <li>Wednesday <span>9 AM - 5 PM</span></li> <li>Thursday <span>9 AM - 5 PM</span></li> <li>Friday <span>9 AM - 5 PM</span></li> <li>Saturday <span>9 AM - 3 PM</span></li> <li>Sunday <span>Closed</span></li> </ul> </div> </div> </div> </div> </div>

.widget-boxed { background-color: #fff; border-radius: 6px; padding: 0 12px 32px 20px; transform: translate3d(0,0,0); z-index: 90; margin-bottom: 35px; position: relative; border: 1px solid #eaeff5; box-shadow: 0 0 10px 1px rgb(71 85 95 / 8%); -webkit-box-shadow: 0 0 10px 1px rgb(71 85 95 / 8%); -moz-box-shadow: 0 0 10px 1px rgba(71,85,95,0.08); } .widget-boxed-header { padding: 14px 0; border-bottom: 1px solid #eaeff5; } .side-list ul { margin: 0; padding: 0; } .side-list ul li { list-style: none; padding: 10px 5px; display: inline-block; width: 100%; border-bottom: 1px dashed #eaeff5; } .side-list ul li span { float: right; }