<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 ----------> <div class="legend"> <h4>Legend</h4> <ul> <li><span style="background-color:#FA5C43"></span>Zone 1 - Monday</li> <li><span style="background-color:#998973"></span>Zone 2 - Tuesday</li> <li><span style="background-color:#FAAE43"></span>Zone 3 - Wednesday</li> <li><span style="background-color:#1F6980"></span>Zone 4 - Thursday</li> <li><span style="background-color:#AB156A"></span>Zone 5 - Friday</li> </ul> </div>

.legend { position: absolute; background: #fff; background: rgba(255, 255, 255, 0.8); left: 80px; top: 20px; padding: 20px; border: 1px solid; } .legend h4 { margin: 0 0 10px; text-transform: uppercase; font-family: sans-serif; text-align: center; } .legend ul { list-style-type: none; margin: 0; padding: 0; } .legend li { padding-bottom: 5px; } .legend span { display: inline-block; width: 12px; height: 12px; margin-right: 6px; }