<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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="container"> <div class="row"> <div class="col-sm-1"> <div class="round round-sm blue"> <a href="#"><a href="#"><span class="glyphicon glyphicon-plus"></a></a> </div> <div class="round round-sm blue"> <a href="#"><span class="glyphicon glyphicon-minus"></a> </div> <div class="round round-sm blue"> <a href="#"><span class="glyphicon glyphicon-cloud"></a> </div> <div class="round round-sm blue"> <a href="#"><span class="glyphicon glyphicon-envelope"></a> </div> <div class="round round-sm blue"> <a href="#"><span class="glyphicon glyphicon-pencil"></a> </div> <div class="round round-sm blue"> <a href="#"><span class="glyphicon glyphicon-glass"></a> </div> <div class="round round-sm blue"> <a href="#"><span class="glyphicon glyphicon-search"></a> </div> <div class="round round-sm blue"> <a href="#"><span class="glyphicon glyphicon-star"></a> </div> <div class="round round-sm blue"> <a href="#"><span class="glyphicon glyphicon-star-empty"></a> </div> <div class="round round-sm blue"> <a href="#"><span class="glyphicon glyphicon-th-large"></a> </div> <div class="round round-sm blue"> <a href="#"><span class="glyphicon glyphicon-th"></a> </div> <div class="round round-sm blue"> <a href="#"><span class="glyphicon glyphicon-th-list"></a> </div> <div class="round round-sm blue"> <a href="#"><span class="glyphicon glyphicon-ok"></a> </div> <div class="round round-sm blue"> <a href="#"><span class="glyphicon glyphicon-remove"></a> </div> <div class="round round-sm blue"> <a href="#"><span class="glyphicon glyphicon-list-alt"></a> </div> <div class="round round-sm blue"> <a href="#"><span class="glyphicon glyphicon-refresh"></a> </div> <div class="round round-sm blue"> <a href="#"><span class="glyphicon glyphicon-off"></a> </div> <div class="round round-sm blue"> <a href="#"><span class="glyphicon glyphicon-download-alt"></a> </div> <div class="round round-sm blue"> <a href="#"><span class="glyphicon glyphicon-download"></a> </div> <div class="round round-sm blue"> <a href="#"><span class="glyphicon glyphicon-upload"></a> </div> <div class="round round-sm blue"> <a href="#"><span class="glyphicon glyphicon-repeat"></a> </div> <div class="round round-sm blue"> <a href="#"><span class="glyphicon glyphicon-flag"></a> </div> <div class="round round-sm blue"> <a href="#"><span class="glyphicon glyphicon-bookmark"></a> </div> <div class="round round-sm blue"> <a href="#"><span class="glyphicon glyphicon-tag"></a> </div> <div class="round round-sm blue"> <a href="#"><span class="glyphicon glyphicon-align-justify"></a> </div> <div class="round round-sm blue"> <a href="#"><span class="glyphicon glyphicon-list"></a> </div> <div class="round round-sm blue"> <a href="#"><span class="glyphicon glyphicon-picture"></a> </div> <div class="round round-sm blue"> <a href="#"><span class="glyphicon glyphicon-map-marker"></a> </div> <div class="round round-sm blue"> <a href="#"><span class="glyphicon glyphicon-adjust"></a> </div> <div class="round round-sm blue"> <a href="#"><span class="glyphicon glyphicon-edit"></a> </div> <div class="round round-sm blue"> <a href="#"><span class="glyphicon glyphicon-share"></a> </div> <div class="round round-sm blue"> <a href="#"><span class="glyphicon glyphicon-check"></a> </div> <div class="round round-sm blue"> <a href="#"><span class="glyphicon glyphicon-move"></a> </div> <div class="round round-sm blue"> <a href="#"><span class="glyphicon glyphicon-play"></a> </div> <div class="round round-sm blue"> <a href="#"><span class="glyphicon glyphicon-pause"></a> </div> <div class="round round-sm blue"> <a href="#"><span class="glyphicon glyphicon-stop"></a> </div> <div class="round round-sm blue"> <a href="#"><span class="glyphicon glyphicon-plus-sign"></a> </div> <div class="round round-sm blue"> <a href="#"><span class="glyphicon glyphicon-minus-sign"></a> </div> <div class="round round-sm blue"> <a href="#"><span class="glyphicon glyphicon-remove-circle"></a> </div> <div class="round round-sm blue"> <a href="#"><span class="glyphicon glyphicon-ok-circle"></a> </div> <div class="round round-sm blue"> <a href="#"><span class="glyphicon glyphicon-ban-circle"></a> </div> <div class="round round-sm blue"> <a href="#"><span class="glyphicon glyphicon-leaf"></a> </div> <div class="round round-sm blue"> <a href="#"><span class="glyphicon glyphicon-eye-open"></a> </div> <div class="round round-sm blue"> <a href="#"><span class="glyphicon glyphicon-eye-close"></a> </div> <div class="round round-sm blue"> <a href="#"><span class="glyphicon glyphicon-comment"></a> </div> <div class="round round-sm blue"> <a href="#"><span class="glyphicon glyphicon-magnet"></a> </div> <div class="round round-sm blue"> <a href="#"><span class="glyphicon glyphicon-chevron-up"></a> </div> <div class="round round-sm blue"> <a href="#"><span class="glyphicon glyphicon-chevron-down"></a> </div> <div class="round round-sm blue"> <a href="#"><span class="glyphicon glyphicon-thumbs-up"></a> </div> <div class="round round-sm blue"> <a href="#"><span class="glyphicon glyphicon-thumbs-down"></a> </div> <div class="round round-sm blue"> <a href="#"><span class="glyphicon glyphicon-wrench"></a> </div> <div class="round round-sm blue"> <a href="#"><span class="glyphicon glyphicon-globe"></a> </div> <div class="round round-sm blue"> <a href="#"><span class="glyphicon glyphicon-tasks"></a> </div> <div class="round round-sm blue"> <a href="#"><span class="glyphicon glyphicon-filter"></a> </div> <div class="round round-sm blue"> <a href="#"><span class="glyphicon glyphicon-dashboard"></a> </div> <div class="round round-sm blue"> <a href="#"><span class="glyphicon glyphicon-paperclip"></a> </div> <div class="round round-sm blue"> <a href="#"><span class="glyphicon glyphicon-heart-empty"></a> </div> <div class="round round-sm blue"> <a href="#"><span class="glyphicon glyphicon-link"></a> </div> <div class="round round-sm blue"> <a href="#"><span class="glyphicon glyphicon-phone"></a> </div> <div class="round round-sm blue"> <a href="#"><span class="glyphicon glyphicon-pushpin"></a> </div> <div class="round round-sm blue"> <a href="#"><span class="glyphicon glyphicon-usd"></a> </div> <div class="round round-sm blue"> <a href="#"><span class="glyphicon glyphicon-gbp"></a> </div> <div class="round round-sm blue"> <a href="#"><span class="glyphicon glyphicon-sort-by-alphabet"></a> </div> <div class="round round-sm blue"> <a href="#"><span class="glyphicon glyphicon-sort-by-alphabet-alt"></a> </div> <div class="round round-sm blue"> <a href="#"><span class="glyphicon glyphicon-sort-by-order"></a> </div> <div class="round round-sm blue"> <a href="#"><span class="glyphicon glyphicon-sort-by-order-alt"></a> </div> <div class="round round-sm blue"> <a href="#"><span class="glyphicon glyphicon-sort-by-attributes"></a> </div> <div class="round round-sm blue"> <a href="#"><span class="glyphicon glyphicon-sort-by-attributes-alt"></a> </div> <div class="round round-sm blue"> <a href="#"><span class="glyphicon glyphicon-floppy-disk"></a> </div> <div class="round round-sm blue"> <a href="#"><span class="glyphicon glyphicon-open"></a> </div> <div class="round round-sm blue"> <a href="#"><span class="glyphicon glyphicon-saved"></a> </div> <div class="round round-sm blue"> <a href="#"><span class="glyphicon glyphicon-send"></a> </div> <div class="round round-sm blue"> <a href="#"><span class="glyphicon glyphicon-floppy-save"></a> </div> <div class="round round-sm blue"> <a href="#"><span class="glyphicon glyphicon-floppy-open"></a> </div> <div class="round round-sm blue"> <a href="#"><span class="glyphicon glyphicon-credit-card"></a> </div> <div class="round round-sm blue"> <a href="#"><span class="glyphicon glyphicon-earphone"></a> </div> <div class="round round-sm blue"> <a href="#"><span class="glyphicon glyphicon-sd-video"></a> </div> <div class="round round-sm blue"> <a href="#"><span class="glyphicon glyphicon-hd-video"></a> </div> <div class="round round-sm blue"> <a href="#"><span class="glyphicon glyphicon-cloud-download"></a> </div> <div class="round round-sm blue"> <a href="#"><span class="glyphicon glyphicon-cloud-upload"></a> </div> <div class="round round-sm blue"> <a href="#"><span class="glyphicon glyphicon-alert"></a> </div> <div class="round round-sm blue"> <a href="#"><span class="glyphicon glyphicon-menu-hamburger"></a> </div> <div class="round round-sm blue"> <a href="#"><span class="glyphicon glyphicon-triangle-left"></a> </div> <div class="round round-sm blue"> <a href="#"><span class="glyphicon glyphicon-triangle-top"></a> </div> <div class="round round-sm blue"> <a href="#"><span class="glyphicon glyphicon-triangle-bottom"></a> </div> <div class="round round-sm blue"> <a href="#"><span class="glyphicon glyphicon-triangle-right"></a> </div> <div class="round round-sm blue"> <a href="#"><span class="glyphicon glyphicon-console"></a> </div> <div class="round round-sm blue"> <a href="#"><span class="glyphicon glyphicon-option-horizontal"></a> </div> <div class="round round-sm blue"> <a href="#"><span class="glyphicon glyphicon-option-vertical"></a> </div> <div class="round round-sm blue"> <a href="#"><span class="glyphicon glyphicon-menu-left"></a> </div> <div class="round round-sm blue"> <a href="#"><span class="glyphicon glyphicon-menu-top"></a> </div> <div class="round round-sm blue"> <a href="#"><span class="glyphicon glyphicon-menu-bottom"></a> </div> <div class="round round-sm blue"> <a href="#"><span class="glyphicon glyphicon-menu-right"></a> </div> </div> </div> </div>

.row { margin-top: 15px; } .round { display: inline-block; height: 48px; width: 48px; line-height: 30px; background-color: #563d7c; color: #FFF; text-align: center; } .round.hollow { display: inline-block; height: 48px; width: 48px; line-height: 48px; background-color: #563d7c; color: #222; text-align: center; -webkit-box-shadow: 0px 0px 0px 3px rgba(0,0,0,0.75); -moz-box-shadow: 0px 0px 0px 3px rgba(0,0,0,0.75); box-shadow: 0px 0px 0px 3px rgba(0,0,0,0.75); } .round.round-sm { height: 24px; width: 24px; line-height: 20px; font-size: 1em; color: white; text-align: center; } .round.blue { background-color: #563d7c; } .round.hollow.blue { color: #3EA6CE; background-color: #563d7c; -webkit-box-shadow: 0px 0px 0px 3px #3EA6CE; -moz-box-shadow: 0px 0px 0px 3px #3EA6CE; box-shadow: 0px 0px 0px 3px #3EA6CE; }