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

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.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 {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
// highlight current day on opeining hours
$(document).ready(function() {
$('.opening-hours li').eq(new Date().getDay()).addClass('today');
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Rubik Presentation Page
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