"Business Hours With Current Day Highlight"
Bootstrap 3.0.0 Snippet by NaszvadiG

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.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 ----------> <!DOCTYPE html> <html lang=""> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href='//netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/> </head> <body> <div class="container demo-bg"> <div class="row"> <div class="col-sm-4"></div> <div class="col-sm-4"></div> <div class="col-sm-4"> <div class="business-hours"> <h2 class="title">Opening Hours</h2> <ul class="list-unstyled opening-hours"> <li>Sunday <span class="pull-right">Closed</span></li> <li>Monday <span class="pull-right">9:00-22:00</span></li> <li>Tuesday <span class="pull-right">9:00-22:00</span></li> <li>Wednesday <span class="pull-right">9:00-22:00</span></li> <li>Thursday <span class="pull-right">9:00-22:00</span></li> <li>Friday <span class="pull-right">9:00-23:30</span></li> <li>Saturday <span class="pull-right">14:00-23:30</span></li> </ul> </div> </div> </div> </div> </body> </html>
.demo-bg{ background: #ffac0c; margin-top: 60px; } .business-hours { background: #222; padding: 40px 14px; margin-top: -15px; position: relative; } .business-hours:before{ content: ''; width: 23px; height: 23px; background: #111; position: absolute; top: 5px; left: -12px; transform: rotate(-45deg); z-index: -1; } .business-hours .title { font-size: 20px; color: #BBB; text-transform: uppercase; padding-left: 5px; border-left: 4px solid #ffac0c; } .business-hours li { color: #888; line-height: 30px; border-bottom: 1px solid #333; } .business-hours li:last-child { border-bottom: none; } .business-hours .opening-hours li.today { color: #ffac0c; }
// highlight current day on opeining hours $(document).ready(function() { $('.opening-hours li').eq(new Date().getDay()).addClass('today'); });

Related: See More

Light Bootstrap Dashboard Angular
Semi Transparent Highlight Box

Questions / Comments:

https://bootsnipp.com/user/snippets/QMWnX

NaszvadiG () - 5 years ago - Reply 0

Hi. Thanks for this. If I wanted to list the days of the week with Monday as the first day, what would I need to do to the script to allow for this?

Thanks.

eastevenson () - 5 years ago - Reply 0

In JS script:

$('.opening-hours li').eq(new Date().getDay() - 1).addClass('today');

NaszvadiG () - 5 years ago - Reply 0

Thanks. I thought that might do it but I was waiting until Sunday to see if it still worked! :D

eastevenson () - 5 years ago - Reply 0