HTML
<!-- Welcome -->
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="well well-sm">
<p class="text-center">
This is a Bootstrap 3 accordion I made that imitates
<a href="https://goo.gl/eY8dFj">Google's Product list page</a>. Enjoy!
</p>
</div>
</div>
</div>
</div>
<!-- /Welcome -->
<!-- Accordion -->
<div class="container" id="apps">
<div class="row">
<div class="col-md-12">
<div class="panel-group" role="tablist" aria-multiselectable="true" id="apps-accordion">
<div class="panel panel-default panel-apps">
<div class="panel-heading" role="tab" data-toggle="collapse" data-target="#apps-accordion .item-1" data-parent="#apps-accordion">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#apps-accordion" aria-expanded="true" href="#apps-accordion .item-1">
<i class="material-icons">keyboard_arrow_down</i>For all
</a>
</h4>
</div>
<div class="panel-collapse collapse in item-1" role="tabpanel">
<div class="panel-body text-center">
<div class="row is-flex">
<div class="col-md-2 col-sm-3 col-xs-4">
<div class="app"><a href="#">
<img src="http://i.imgur.com/ciPRRLX.png" width="60" height="60">
<span>Android Auto</span>
</a></div>
</div>
<div class="col-md-2 col-sm-3 col-xs-4">
<div class="app"><a href="#">
<img src="http://i.imgur.com/qdU5mrV.png" width="60" height="60">
<span>Android Messages</span>
</a></div>
</div>
<div class="col-md-2 col-sm-3 col-xs-4">
<div class="app"><a href="#">
<img src="http://i.imgur.com/Yk5glak.png" width="60" height="60">
<span>Android OS</span>
</a></div>
</div>
<div class="col-md-2 col-sm-3 col-xs-4">
<div class="app"><a href="#">
<img src="http://i.imgur.com/7mfxPqG.png" width="60" height="60">
<span>Android One</span>
</a></div>
</div>
<div class="col-md-2 col-sm-3 col-xs-4">
<div class="app"><a href="#">
<img src="http://i.imgur.com/9EOdRzU.png" width="60" height="60">
<span>Android Pay</span>
</a></div>
</div>
<div class="col-md-2 col-sm-3 col-xs-4">
<div class="app"><a href="#">
<img src="http://i.imgur.com/p62M9e1.png" width="60" height="60">
<span>Android Phones</span>
</a></div>
</div>
<div class="col-md-2 col-sm-3 col-xs-4">
<div class="app"><a href="#">
<img src="http://i.imgur.com/8znwI3F.png" width="60" height="60">
<span>Android Tablets</span>
</a></div>
</div>
<div class="col-md-2 col-sm-3 col-xs-4">
<div class="app"><a href="#">
<img src="http://i.imgur.com/uPLl447.png" width="60" height="60">
<span>Android Wear</span>
</a></div>
</div>
<div class="col-md-2 col-sm-3 col-xs-4">
<div class="app"><a href="#">
<img src="http://i.imgur.com/18VzsBz.png" width="60" height="60">
<span>Calendar</span>
</a></div>
</div>
<div class="col-md-2 col-sm-3 col-xs-4">
<div class="app"><a href="#">
<img src="http://i.imgur.com/tWNgayV.png" width="60" height="60">
<span>Cardboard</span>
</a></div>
</div>
<div class="col-md-2 col-sm-3 col-xs-4">
<div class="app"><a href="#">
<img src="http://i.imgur.com/xoe4PNe.png" width="60" height="60">
<span>Chrome</span>
</a></div>
</div>
<div class="col-md-2 col-sm-3 col-xs-4">
<div class="app"><a href="#">
<img src="http://i.imgur.com/VGi1S3d.png" width="60" height="60">
<span>Chrome Web Store</span>
</a></div>
</div>
<div class="col-md-2 col-sm-3 col-xs-4">
<div class="app"><a href="#">
<img src="http://i.imgur.com/dOb9W0e.png" width="60" height="60">
<span>Chromebook</span>
</a></div>
</div>
<div class="col-md-2 col-sm-3 col-xs-4">
<div class="app"><a href="#">
<img src="http://i.imgur.com/1cB4JVb.png" width="60" height="60">
<span>Chromecast</span>
</a></div>
</div>
<div class="col-md-2 col-sm-3 col-xs-4">
<div class="app"><a href="#">
<img src="http://i.imgur.com/lCzEVuS.png" width="60" height="60">
<span>Contacts</span>
</a></div>
</div>
<div class="col-md-2 col-sm-3 col-xs-4">
<div class="app"><a href="#">
<img src="http://i.imgur.com/laiH0C2.png" width="60" height="60">
<span>Daydream View</span>
</a></div>
</div>
<div class="col-md-2 col-sm-3 col-xs-4">
<div class="app"><a href="#">
<img src="http://i.imgur.com/eLkmR4w.png" width="60" height="60">
<span>Docs</span>
</a></div>
</div>
<div class="col-md-2 col-sm-3 col-xs-4">
<div class="app"><a href="#">
<img src="http://i.imgur.com/q6DLYEN.png" width="60" height="60">
<span>Drawings</span>
</a></div>
</div>
<div class="col-md-2 col-sm-3 col-xs-4">
<div class="app"><a href="#">
<img src="http://i.imgur.com/x4h0kEV.png" width="60" height="60">
<span>Drive</span>
</a></div>
</div>
<div class="col-md-2 col-sm-3 col-xs-4">
<div class="app"><a href="#">
<img src="http://i.imgur.com/54IjjTD.png" width="60" height="60">
<span>Earth</span>
</a></div>
</div>
<div class="col-md-2 col-sm-3 col-xs-4">
<div class="app"><a href="#">
<img src="http://i.imgur.com/6FqrU6G.png" width="60" height="60">
<span>Finance</span>
</a></div>
</div>
<div class="col-md-2 col-sm-3 col-xs-4">
<div class="app"><a href="#">
<img src="http://i.imgur.com/BPnghbV.png" width="60" height="60">
<span>Forms</span>
</a></div>
</div>
<div class="col-md-2 col-sm-3 col-xs-4">
<div class="app"><a href="#">
<img src="http://i.imgur.com/59JryZI.png" width="60" height="60">
<span>Gboard</span>
</a></div>
</div>
<div class="col-md-2 col-sm-3 col-xs-4">
<div class="app"><a href="#">
<img src="http://i.imgur.com/RsWsPy9.png" width="60" height="60">
<span>Gmail</span>
</a></div>
</div>
<div class="col-md-2 col-sm-3 col-xs-4">
<div class="app"><a href="#">
<img src="http://i.imgur.com/StFkoji.png" width="60" height="60">
<span>Google Alerts</span>
</a></div>
</div>
<div class="col-md-2 col-sm-3 col-xs-4">
<div class="app"><a href="#">
<img src="http://i.imgur.com/sAjQueO.png" width="60" height="60">
<span>Google Allo</span>
</a></div>
</div>
<div class="col-md-2 col-sm-3 col-xs-4">
<div class="app"><a href="#">
<img src="http://i.imgur.com/KgLueWP.png" width="60" height="60">
<span>Google Camera</span>
</a></div>
</div>
<div class="col-md-2 col-sm-3 col-xs-4">
<div class="app"><a href="#">
<img src="http://i.imgur.com/up42LU8.png" width="60" height="60">
<span>Google Cast</span>
</a></div>
</div>
<div class="col-md-2 col-sm-3 col-xs-4">
<div class="app"><a href="#">
<img src="http://i.imgur.com/1I8kYOJ.png" width="60" height="60">
<span>Google Classroom</span>
</a></div>
</div>
<div class="col-md-2 col-sm-3 col-xs-4">
<div class="app"><a href="#">
<img src="http://i.imgur.com/2nTTY76.png" width="60" height="60">
<span>Google Cloud Print</span>
</a></div>
</div>
<div class="col-md-2 col-sm-3 col-xs-4">
<div class="app"><a href="#">
<img src="http://i.imgur.com/pPaiGgM.png" width="60" height="60">
<span>Google Duo</span>
</a></div>
</div>
<div class="col-md-2 col-sm-3 col-xs-4">
<div class="app"><a href="#">
<img src="http://i.imgur.com/zGaS3Si.png" width="60" height="60">
<span>Google Expeditions</span>
</a></div>
</div>
<div class="col-md-2 col-sm-3 col-xs-4">
<div class="app"><a href="#">
<img src="http://i.imgur.com/PTF2k4b.png" width="60" height="60">
<span>Google Express</span>
</a></div>
</div>
<div class="col-md-2 col-sm-3 col-xs-4">
<div class="app"><a href="#">
<img src="http://i.imgur.com/h4VdXhL.png" width="60" height="60">
<span>Google Fit</span>
</a></div>
</div>
<div class="col-md-2 col-sm-3 col-xs-4">
<div class="app"><a href="#">
<img src="http://i.imgur.com/Aj6a5Kb.png" width="60" height="60">
<span>Google Flights</span>
</a></div>
</div>
<div class="col-md-2 col-sm-3 col-xs-4">
<div class="app"><a href="#">
<img src="http://i.imgur.com/XJNwIXn.png" width="60" height="60">
<span>Google Fonts</span>
</a></div>
</div>
<div class="col-md-2 col-sm-3 col-xs-4">
<div class="app"><a href="#">
<img src="http://i.imgur.com/LmRb2aT.png" width="60" height="60">
<span>Google Goggles</span>
</a></div>
</div>
<div class="col-md-2 col-sm-3 col-xs-4">
<div class="app"><a href="#">
<img src="http://i.imgur.com/ljEABX1.png" width="60" height="60">
<span>Google Groups</span>
</a></div>
</div>
<div class="col-md-2 col-sm-3 col-xs-4">
<div class="app"><a href="#">
<img src="http://i.imgur.com/QXyJHHG.png" width="60" height="60">
<span>Google Home</span>
</a></div>
</div>
<div class="col-md-2 col-sm-3 col-xs-4">
<div class="app"><a href="#">
<img src="http://i.imgur.com/SbVexoC.png" width="60" height="60">
<span>Google Input Tools</span>
</a></div>
</div>
<div class="col-md-2 col-sm-3 col-xs-4">
<div class="app"><a href="#">
<img src="http://i.imgur.com/n3DLpZF.png" width="60" height="60">
<span>Google One Today</span>
</a></div>
</div>
<div class="col-md-2 col-sm-3 col-xs-4">
<div class="app"><a href="#">
<img src="http://i.imgur.com/VxxaFSH.png" width="60" height="60">
<span>Google Play</span>
</a></div>
</div>
<div class="col-md-2 col-sm-3 col-xs-4">
<div class="app"><a href="#">
<img src="http://i.imgur.com/71tFysa.png" width="60" height="60">
<span>Google Play Apps</span>
</a></div>
</div>
<div class="col-md-2 col-sm-3 col-xs-4">
<div class="app"><a href="#">
<img src="http://i.imgur.com/g6iOGXa.png" width="60" height="60">
<span>Google Play Games</span>
</a></div>
</div>
<div class="col-md-2 col-sm-3 col-xs-4">
<div class="app"><a href="#">
<img src="http://i.imgur.com/xwrf6Wn.png" width="60" height="60">
<span>Google Play Movies & TV</span>
</a></div>
</div>
<div class="col-md-2 col-sm-3 col-xs-4">
<div class="app"><a href="#">
<img src="http://i.imgur.com/8ARtJtg.png" width="60" height="60">
<span>Google Play Music</span>
</a></div>
</div>
<div class="col-md-2 col-sm-3 col-xs-4">
<div class="app"><a href="#">
<img src="http://i.imgur.com/wrAJrEP.png" width="60" height="60">
<span>Google Play Newsstand</span>
</a></div>
</div>
<div class="col-md-2 col-sm-3 col-xs-4">
<div class="app"><a href="#">
<img src="http://i.imgur.com/GiNUG8h.png" width="60" height="60">
<span>Google Store</span>
</a></div>
</div>
<div class="col-md-2 col-sm-3 col-xs-4">
<div class="app"><a href="#">
<img src="http://i.imgur.com/UvFwcQM.png" width="60" height="60">
<span>Google Sync</span>
</a></div>
</div>
<div class="col-md-2 col-sm-3 col-xs-4">
<div class="app"><a href="#">
<img src="http://i.imgur.com/uMgoXOZ.png" width="60" height="60">
<span>Google Wifi</span>
</a></div>
</div>
<div class="col-md-2 col-sm-3 col-xs-4">
<div class="app"><a href="#">
<img src="http://i.imgur.com/G3Fxvw1.png" width="60" height="60">
<span>Google for Education</span>
</a></div>
</div>
<div class="col-md-2 col-sm-3 col-xs-4">
<div class="app"><a href="#">
<img src="http://i.imgur.com/OhdMs7W.png" width="60" height="60">
<span>Google+</span>
</a></div>
</div>
<div class="col-md-2 col-sm-3 col-xs-4">
<div class="app"><a href="#">
<img src="http://i.imgur.com/s4OgOb8.png" width="60" height="60">
<span>Hangouts</span>
</a></div>
</div>
<div class="col-md-2 col-sm-3 col-xs-4">
<div class="app"><a href="#">
<img src="http://i.imgur.com/xJGkdaR.png" width="60" height="60">
<span>Inbox by Gmail</span>
</a></div>
</div>
<div class="col-md-2 col-sm-3 col-xs-4">
<div class="app"><a href="#">
<img src="http://i.imgur.com/JkPYNpX.png" width="60" height="60">
<span>Keep</span>
</a></div>
</div>
<div class="col-md-2 col-sm-3 col-xs-4">
<div class="app"><a href="#">
<img src="http://i.imgur.com/90QIdzD.png" width="60" height="60">
<span>Maps</span>
</a></div>
</div>
<div class="col-md-2 col-sm-3 col-xs-4">
<div class="app"><a href="#">
<img src="http://i.imgur.com/gYR0nDW.png" width="60" height="60">
<span>News</span>
</a></div>
</div>
<div class="col-md-2 col-sm-3 col-xs-4">
<div class="app"><a href="#">
<img src="http://i.imgur.com/3qOLvtA.png" width="60" height="60">
<span>Nexus</span>
</a></div>
</div>
<div class="col-md-2 col-sm-3 col-xs-4">
<div class="app"><a href="#">
<img src="http://i.imgur.com/qKf3NY3.png" width="60" height="60">
<span>OnHub</span>
</a></div>
</div>
<div class="col-md-2 col-sm-3 col-xs-4">
<div class="app"><a href="#">
<img src="http://i.imgur.com/MCPy2xr.png" width="60" height="60">
<span>Photos</span>
</a></div>
</div>
<div class="col-md-2 col-sm-3 col-xs-4">
<div class="app"><a href="#">
<img src="http://i.imgur.com/D7aI1po.png" width="60" height="60">
<span>Pixel</span>
</a></div>
</div>
<div class="col-md-2 col-sm-3 col-xs-4">
<div class="app"><a href="#">
<img src="http://i.imgur.com/5jdISeo.png" width="60" height="60">
<span>Project Fi</span>
</a></div>
</div>
<div class="col-md-2 col-sm-3 col-xs-4">
<div class="app"><a href="#">
<img src="http://i.imgur.com/rM2JLOH.png" width="60" height="60">
<span>Scholar</span>
</a></div>
</div>
<div class="col-md-2 col-sm-3 col-xs-4">
<div class="app"><a href="#">
<img src="http://i.imgur.com/4eGcCAq.png" width="60" height="60">
<span>Search</span>
</a></div>
</div>
<div class="col-md-2 col-sm-3 col-xs-4">
<div class="app"><a href="#">
<img src="http://i.imgur.com/ywwAJtj.png" width="60" height="60">
<span>Sheets</span>
</a></div>
</div>
<div class="col-md-2 col-sm-3 col-xs-4">
<div class="app"><a href="#">
<img src="http://i.imgur.com/IXmWLpj.png" width="60" height="60">
<span>Sites</span>
</a></div>
</div>
<div class="col-md-2 col-sm-3 col-xs-4">
<div class="app"><a href="#">
<img src="http://i.imgur.com/tUrvsCY.png" width="60" height="60">
<span>Slides</span>
</a></div>
</div>
<div class="col-md-2 col-sm-3 col-xs-4">
<div class="app"><a href="#">
<img src="http://i.imgur.com/PuLeYRZ.png" width="60" height="60">
<span>Smartbox</span>
</a></div>
</div>
<div class="col-md-2 col-sm-3 col-xs-4">
<div class="app"><a href="#">
<img src="http://i.imgur.com/KMnsYNc.png" width="60" height="60">
<span>Tango</span>
</a></div>
</div>
<div class="col-md-2 col-sm-3 col-xs-4">
<div class="app"><a href="#">
<img src="http://i.imgur.com/fGiWG8t.png" width="60" height="60">
<span>Tilt Brush</span>
</a></div>
</div>
<div class="col-md-2 col-sm-3 col-xs-4">
<div class="app"><a href="#">
<img src="http://i.imgur.com/jjjSm6I.png" width="60" height="60">
<span>Translate</span>
</a></div>
</div>
<div class="col-md-2 col-sm-3 col-xs-4">
<div class="app"><a href="#">
<img src="http://i.imgur.com/LEJlgDZ.png" width="60" height="60">
<span>Trips</span>
</a></div>
</div>
<div class="col-md-2 col-sm-3 col-xs-4">
<div class="app"><a href="#">
<img src="http://i.imgur.com/hkT7hGU.png" width="60" height="60">
<span>Voice</span>
</a></div>
</div>
<div class="col-md-2 col-sm-3 col-xs-4">
<div class="app"><a href="#">
<img src="http://i.imgur.com/l9AzjlH.png" width="60" height="60">
<span>Waze</span>
</a></div>
</div>
<div class="col-md-2 col-sm-3 col-xs-4">
<div class="app"><a href="#">
<img src="http://i.imgur.com/AhlDnpu.png" width="60" height="60">
<span>YouTube</span>
</a></div>
</div>
<div class="col-md-2 col-sm-3 col-xs-4">
<div class="app"><a href="#">
<img src="http://i.imgur.com/a34YvOh.png" width="60" height="60">
<span>YouTube Gaming</span>
</a></div>
</div>
<div class="col-md-2 col-sm-3 col-xs-4">
<div class="app"><a href="#">
<img src="http://i.imgur.com/HgtzyQq.png" width="60" height="60">
<span>YouTube Kids</span>
</a></div>
</div>
<div class="col-md-2 col-sm-3 col-xs-4">
<div class="app"><a href="#">
<img src="http://i.imgur.com/seFWREX.png" width="60" height="60">
<span>Zagat</span>
</a></div>
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default panel-apps">
<div class="panel-heading" role="tab" data-toggle="collapse" data-target="#apps-accordion .item-2" data-parent="#apps-accordion">
<h4 class="panel-title" data-toggle="collapse">
<a role="button" data-toggle="collapse" data-parent="#apps-accordion" aria-expanded="false" href="#apps-accordion .item-2">
<i class="material-icons">keyboard_arrow_down</i>For business
</a>
</h4>
</div>
<div class="panel-collapse collapse item-2" role="tabpanel">
<div class="panel-body">
<div class="row is-flex">
<div class="col-md-2 col-sm-3 col-xs-4">
<div class="app"><a href="#">
<img src="http://i.imgur.com/gINcsbB.png" width="60" height="60">
<span>Admob</span>
</a></div>
</div>
<div class="col-md-2 col-sm-3 col-xs-4">
<div class="app"><a href="#">
<img src="http://i.imgur.com/rE8vwnt.png" width="60" height="60">
<span>AdSense</span>
</a></div>
</div>
<div class="col-md-2 col-sm-3 col-xs-4">
<div class="app"><a href="#">
<img src="http://i.imgur.com/503SJER.png" width="60" height="60">
<span>AdWords</span>
</a></div>
</div>
<div class="col-md-2 col-sm-3 col-xs-4">
<div class="app"><a href="#">
<img src="http://i.imgur.com/KDlusVM.png" width="60" height="60">
<span>AdWords Express</span>
</a></div>
</div>
<div class="col-md-2 col-sm-3 col-xs-4">
<div class="app"><a href="#">
<img src="http://i.imgur.com/DyY3nCq.png" width="60" height="60">
<span>Analytics</span>
</a></div>
</div>
<div class="col-md-2 col-sm-3 col-xs-4">
<div class="app"><a href="#">
<img src="http://i.imgur.com/jg2TmmU.png" width="60" height="60">
<span>Android</span>
</a></div>
</div>
<div class="col-md-2 col-sm-3 col-xs-4">
<div class="app"><a href="#">
<img src="http://i.imgur.com/ZhOseR9.png" width="60" height="60">
<span>Blogger</span>
</a></div>
</div>
<div class="col-md-2 col-sm-3 col-xs-4">
<div class="app"><a href="#">
<img src="http://i.imgur.com/zEslI9N.png" width="60" height="60">
<span>Chrome</span>
</a></div>
</div>
<div class="col-md-2 col-sm-3 col-xs-4">
<div class="app"><a href="#">
<img src="http://i.imgur.com/23avxvZ.png" width="60" height="60">
<span>DoubleClick by Google</span>
</a></div>
</div>
<div class="col-md-2 col-sm-3 col-xs-4">
<div class="app"><a href="#">
<img src="http://i.imgur.com/X0ZKobt.png" width="60" height="60">
<span>G Suite</span>
</a></div>
</div>
<div class="col-md-2 col-sm-3 col-xs-4">
<div class="app"><a href="#">
<img src="http://i.imgur.com/NMSa6vF.png" width="60" height="60">
<span>Google Cloud Platform</span>
</a></div>
</div>
<div class="col-md-2 col-sm-3 col-xs-4">
<div class="app"><a href="#">
<img src="http://i.imgur.com/uyh87AI.png" width="60" height="60">
<span>Google Domains</span>
</a></div>
</div>
<div class="col-md-2 col-sm-3 col-xs-4">
<div class="app"><a href="#">
<img src="http://i.imgur.com/rXaxFXm.png" width="60" height="60">
<span>Google Enterprise Search</span>
</a></div>
</div>
<div class="col-md-2 col-sm-3 col-xs-4">
<div class="app"><a href="#">
<img src="http://i.imgur.com/LWGlRea.png" width="60" height="60">
<span>Google Maps APIs</span>
</a></div>
</div>
<div class="col-md-2 col-sm-3 col-xs-4">
<div class="app"><a href="#">
<img src="http://i.imgur.com/dpksNjv.png" width="60" height="60">
<span>Google Merchant Center</span>
</a></div>
</div>
<div class="col-md-2 col-sm-3 col-xs-4">
<div class="app"><a href="#">
<img src="http://i.imgur.com/gMg8eMO.png" width="60" height="60">
<span>Google My Business</span>
</a></div>
</div>
<div class="col-md-2 col-sm-3 col-xs-4">
<div class="app"><a href="#">
<img src="http://i.imgur.com/X3iADjP.png" width="60" height="60">
<span>Google Shopping Campaigns</span>
</a></div>
</div>
<div class="col-md-2 col-sm-3 col-xs-4">
<div class="app"><a href="#">
<img src="http://i.imgur.com/76TuTWc.png" width="60" height="60">
<span>Google Street View</span>
</a></div>
</div>
<div class="col-md-2 col-sm-3 col-xs-4">
<div class="app"><a href="#">
<img src="http://i.imgur.com/Wng7mbl.png" width="60" height="60">
<span>Google Surveys</span>
</a></div>
</div>
<div class="col-md-2 col-sm-3 col-xs-4">
<div class="app"><a href="#">
<img src="http://i.imgur.com/Aj3ov04.png" width="60" height="60">
<span>Google Tag Manager</span>
</a></div>
</div>
<div class="col-md-2 col-sm-3 col-xs-4">
<div class="app"><a href="#">
<img src="http://i.imgur.com/SSbJpUr.png" width="60" height="60">
<span>Google Trends</span>
</a></div>
</div>
<div class="col-md-2 col-sm-3 col-xs-4">
<div class="app"><a href="#">
<img src="http://i.imgur.com/doRjpHE.png" width="60" height="60">
<span>Google Trusted Stores</span>
</a></div>
</div>
<div class="col-md-2 col-sm-3 col-xs-4">
<div class="app"><a href="#">
<img src="http://i.imgur.com/MQdkuoe.png" width="60" height="60">
<span>Google Web Designer</span>
</a></div>
</div>
<div class="col-md-2 col-sm-3 col-xs-4">
<div class="app"><a href="#">
<img src="http://i.imgur.com/176yrlB.png" width="60" height="60">
<span>Google+ Brands</span>
</a></div>
</div>
<div class="col-md-2 col-sm-3 col-xs-4">
<div class="app"><a href="#">
<img src="http://i.imgur.com/pu7jkYn.png" width="60" height="60">
<span>Local Inventory Ads</span>
</a></div>
</div>
<div class="col-md-2 col-sm-3 col-xs-4">
<div class="app"><a href="#">
<img src="http://i.imgur.com/oVJTVsO.png" width="60" height="60">
<span>Search Console</span>
</a></div>
</div>
<div class="col-md-2 col-sm-3 col-xs-4">
<div class="app"><a href="#">
<img src="http://i.imgur.com/A7BRu2N.png" width="60" height="60">
<span>Waze Local</span>
</a></div>
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default panel-apps">
<div class="panel-heading" role="tab" data-toggle="collapse" data-target="#apps-accordion .item-3" data-parent="#apps-accordion">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#apps-accordion" aria-expanded="false" href="#apps-accordion .item-3">
<i class="material-icons">keyboard_arrow_down</i>For developers
</a>
</h4>
</div>
<div class="panel-collapse collapse item-3" role="tabpanel">
<div class="panel-body">
<div class="row is-flex">
<div class="col-md-2 col-sm-3 col-xs-4">
<div class="app"><a href="#">
<img src="http://i.imgur.com/MrTByL8.png" width="60" height="60">
<span>App Testing</span>
</a></div>
</div>
<div class="col-md-2 col-sm-3 col-xs-4">
<div class="app"><a href="#">
<img src="http://i.imgur.com/WDBZUp9.png" width="60" height="60">
<span>Cloud Computing</span>
</a></div>
</div>
<div class="col-md-2 col-sm-3 col-xs-4">
<div class="app"><a href="#">
<img src="http://i.imgur.com/rDhgEji.png" width="60" height="60">
<span>Devices</span>
</a></div>
</div>
<div class="col-md-2 col-sm-3 col-xs-4">
<div class="app"><a href="#">
<img src="http://i.imgur.com/ZSZ5XqA.png" width="60" height="60">
<span>Engagement</span>
</a></div>
</div>
<div class="col-md-2 col-sm-3 col-xs-4">
<div class="app"><a href="#">
<img src="http://i.imgur.com/9a5pUc0.png" width="60" height="60">
<span>Game Services</span>
</a></div>
</div>
<div class="col-md-2 col-sm-3 col-xs-4">
<div class="app"><a href="#">
<img src="http://i.imgur.com/mRB25en.png" width="60" height="60">
<span>Growth</span>
</a></div>
</div>
<div class="col-md-2 col-sm-3 col-xs-4">
<div class="app"><a href="#">
<img src="http://i.imgur.com/nlZ2S2J.png" width="60" height="60">
<span>Maps + Location</span>
</a></div>
</div>
<div class="col-md-2 col-sm-3 col-xs-4">
<div class="app"><a href="#">
<img src="http://i.imgur.com/GOYeOMM.png" width="60" height="60">
<span>Messaging + Notifications</span>
</a></div>
</div>
<div class="col-md-2 col-sm-3 col-xs-4">
<div class="app"><a href="#">
<img src="http://i.imgur.com/EaE7QUF.png" width="60" height="60">
<span>Monetization</span>
</a></div>
</div>
<div class="col-md-2 col-sm-3 col-xs-4">
<div class="app"><a href="#">
<img src="http://i.imgur.com/GrsrEbO.png" width="60" height="60">
<span>Monitoring</span>
</a></div>
</div>
<div class="col-md-2 col-sm-3 col-xs-4">
<div class="app"><a href="#">
<img src="http://i.imgur.com/N7ZO5XM.png" width="60" height="60">
<span>Payments</span>
</a></div>
</div>
<div class="col-md-2 col-sm-3 col-xs-4">
<div class="app"><a href="#">
<img src="http://i.imgur.com/CjXxRkV.png" width="60" height="60">
<span>Sign in + Identity</span>
</a></div>
</div>
<div class="col-md-2 col-sm-3 col-xs-4">
<div class="app"><a href="#">
<img src="http://i.imgur.com/hMk449j.png" width="60" height="60">
<span>Storage + Sync</span>
</a></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
CSS
body {
background-color:#fafafa;
}
#apps {
color:#757575;
font:300 normal 16px Roboto, Arial, Helvetica, sans-serif;
margin-top:30px;
margin-bottom:30px;
}
@media (min-width:1200px) {
#apps.container {
width:1200px;
}
}
@media (min-width:1440px) {
#apps.container {
width:1440px;
}
}
#apps .row.is-flex {
display:flex;
flex-wrap:wrap;
}
#apps .row.is-flex > [class*='col-'] {
display:flex;
flex-direction:column;
}
#apps .row.is-flex {
display:-webkit-box;
display:-webkit-flex;
display:-ms-flexbox;
display:flex;
-webkit-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
}
#apps .row.is-flex > [class*='col-'] {
display:-webkit-box;
display:-webkit-flex;
display:-ms-flexbox;
display:flex;
-webkit-box-orient:vertical;
-webkit-box-direction:normal;
-webkit-flex-direction:column;
-ms-flex-direction:column;
flex-direction:column;
padding-left:10px;
padding-right:10px;
}
#apps .panel-group .panel + .panel {
margin-top:0;
border:none;
}
.panel-apps {
border:none;
}
#apps .panel-title {
color:#fff;
font-size:22px;
font-weight:300;
line-height:30px;
}
#apps .panel-title a:hover, .panel-title a:focus {
text-decoration:none;
}
#apps .panel-title .material-icons {
display:inline-flex;
vertical-align:middle;
margin-right:.5em;
transition:transform .3s cubic-bezier(.4,0,.2,1);
}
.panel-apps > .panel-heading {
background-color:#4285F4;
background-image:none;
border-radius:0;
padding:20px 4%;
cursor:pointer;
border:none;
border-bottom:1px solid #247cf3;
}
.panel-apps > .panel-heading:hover {
background-color:#508EF5;
}
.app {
margin:15px auto;
}
.app a {
display:block;
}
.app a:hover {
text-decoration:none;
}
.app img {
display:block;
margin:0 auto;
}
.app span {
display:block;
padding-top:5px;
text-decoration:none;
text-align:center;
}
.app a span {
color:#757575;
}
.app a:hover span {
color:#9e9e9e;
}