<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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 ----------> <section id="editor" class="row"> <div class="col-canvas col-md-2"> <span>Account List</span> </div> <div class="col-canvas col-md-8"> <ul class="wrapper"> <li class="report-column"> <header>A</header> </li> <li class="report-column"> <header>B</header> </li> <li class="report-column"> <header>C</header> </li> <li class="report-column"> <header>D</header> </li> <li class="report-column"> <header>E</header> </li> <li class="report-column"> <header>F</header> </li> <li class="report-column"> <header>G</header> </li> <li class="report-column"> <header>H</header> </li> <li class="report-column"> <header>I</header> </li> </ul> </div> <div class="col-canvas col-md-2"> <ul> <li class="report-column add-column"> <i class="glyphicon glyphicon-plus-sign"></i> <div id="add-choices" class="list-group"> <a href="#" class="list-group-item">Data</a> <a href="#" class="list-group-item">Variance</a> <a href="#" class="list-group-item">Space</a> </div> </li> </ul> </div> </section>

.col-canvas { border: 5px dashed #939393; height: 500px; overflow-y: hidden; overflow-x: auto; } .wrapper { list-style: none; white-space: nowrap; } .report-column { height: 460px; border: 2px solid #3f3f3f; background-color: #f2f2f2; margin-top: 5px; border-radius: 0px 3px 0px 3px; padding: 10px; width: 200px; display: -moz-inline-box; display: inline-block; } .report-column header { font-weight: bold; text-transform: capitalize; text-align: center; padding-bottom: 5px; } .add-column { border: 2px dashed #939393; background-color: transparent; text-align: center; width: 100px; display: -moz-inline-box; display: inline-block; } .add-column .glyphicon { font-size: 2em; color: #c2c2c2; } .add-column a.list-group-item { color: #d2d2d2; font-size: .75em; } .add-column a.list-group-item:hover { background-color: #f7a737; color: #525252; font-size: .75em; }

/*$('.add-column').hover( function() { window.console && console.log('hover'); $('.add-column > i').addClass('hidden'); $('#add-choices').removeClass('hidden'); });*/