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