<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 ----------> <!-- test --> <div class="dock"> <div class="icons"> <div class="finder"><img src="http://icons.iconarchive.com/icons/johanchalibert/mac-osx-yosemite/1024/finder-icon.png" alt="finder"/></div> <div class="icon"><img src="http://icons.iconarchive.com/icons/johanchalibert/mac-osx-yosemite/1024/safari-icon.png" alt="Safari"/></div> <div class="icon"><img src="https://upload.wikimedia.org/wikipedia/commons/8/87/Google_Chrome_icon_(2011).png" alt="Chrome"/></div> <div class="icon"><img src="https://www.gadgetdaily.xyz/wp-content/uploads/2013/07/Notes-5.png" alt="Notes"/></div> <div class="icon"><img src="http://icons.iconarchive.com/icons/johanchalibert/mac-osx-yosemite/1024/calendar-icon.png" alt="Calendar"/></div> <div class="icon"><img src="http://icons.iconarchive.com/icons/johanchalibert/mac-osx-yosemite/1024/reminders-icon.png" alt="reminders"/></div> <div class="icon"><img src="http://icons.iconarchive.com/icons/johanchalibert/mac-osx-yosemite/1024/facetime-icon.png" alt="facetime"/></div> <div class="icon"><img src="http://www.myiconfinder.com/uploads/iconsets/21cabddae0ef1e593f7d11a4262a3ec9-appstore.png" alt="App Store"/></div> <div class="icon"><img src="http://icons.iconarchive.com/icons/johanchalibert/mac-osx-yosemite/1024/contacts-icon.png" alt="contacts"/></div> <div class="icon"><img src="http://icons.iconarchive.com/icons/johanchalibert/mac-osx-yosemite/1024/mail-icon.png" alt="mail"/></div> <div class="icon"><img src="http://cdn.osxdaily.com/wp-content/uploads/2013/11/maps-icon-os-x-300x300.png" alt="maps"/></div> <div class="icon"><img src="http://icons.iconarchive.com/icons/johanchalibert/mac-osx-yosemite/1024/messages-icon.png" alt="messages"/></div> <div class="icon"><img src="https://cdn2.iconfinder.com/data/icons/ios7-inspired-mac-icon-set/1024/itunes_5122x.png" alt="itunes"/></div> <div class="icon settings"><img src="http://icons.iconarchive.com/icons/johanchalibert/mac-osx-yosemite/1024/system-preferences-icon.png" alt="system preferences"/></div> </div> </div> <style type="text/css"> .dock { border-radius: 2px; box-shadow: 0 -2px -2px 0 rgba(0,0,0,0.16), 0 0 0 1px rgba(0,0,0,0.08); transition: box-shadow 200ms cubic-bezier(0.4, 0.0, 0.2, 1); width: 825px; position: absolute; bottom: 0px; left: 0; right: 0; height: 70px; background-color: #C4C4C4; margin: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .dock .icons { width: 800px; } .dock .icons .finder { width: 40px; margin-left: 15px; display: inline-block; } .dock .icons .finder:after { content: " "; height: 5px; width: 5px; background-color: #fff; border-radius: 50%; position: absolute; top: 60px; left: 4.5%; } .dock .icons .finder img { width: 50px; -webkit-transition: 0.2s; transition: 0.2s; } .dock .icons .finder img:hover { -webkit-transform: scale(1.2); transform: scale(1.2); } .dock .icons .icon { width: 40px; margin-left: 12px; display: inline-block; } .dock .icons .icon img { width: 50px; -webkit-transition: 0.2s; transition: 0.2s; } .dock .icons .icon img:hover { -webkit-transform: scale(1.2); transform: scale(1.2); } .dock .icons .icon.settings { border-left: 1px solid #fff; padding-left: 10px; } </style>