"filter"
Bootstrap 3.0.0 Snippet by evarevirus

Post to Facebook Tweet this

<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 ----------> <!DOCTYPE html><html class=''> <head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/_nile/pen/vXWXmJ?limit=all&page=38&q=food" /> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'> <style class="cp-pen-styles">@import 'https://fonts.googleapis.com/css?family=Raleway'; * { padding: 0; margin: 0; box-sizing: border-box; } body * { font-family: 'raleway' sans-serif; } .portfollio .head { background: #fafafa; text-align: center; margin-bottom: 20px; border-bottom: 1px solid rgba(0, 0, 0, 0.1) } .portfollio .head span { display: inline-block; margin: 0 20px; padding:30px 0; cursor: pointer; color: #999; text-transform: capitalize; letter-spacing: 3px; transition: all 0.5s ease } .active, .portfollio .head span:hover { border-bottom: 1px solid rgba(0, 0, 0, 0.3); color: #000 } .active { color: #000 !important } .photo .tab { margin: 20px 0; position: relative } .photo .tab img { height: 300px; } .photo .tab h2 { position: absolute; bottom: -9px; width: 93.5%; padding: 20px; text-align: center; background: rgba(0, 0, 0, 0.5); color: #fff; transition: all 0.5s ease; cursor: pointer } .photo .tab:hover h2 { height: 100%; line-height: 300px; background: rgba(0, 0, 0, 0.8); }</style></head><body> <div class="container"> <div class="row"> <div class="portfollio col-md-12"> <div class="head"> <span>all</span> <span>web design</span> <span>app design</span> <span>icons</span> </div> </div> <div class="photo"> <div class="tab col-md-4"> <img src="http://scr3.templatemonster.com/400x400/58000/58091-original.jpg" alt="" width="100%"> <h2>Web Design</h2> </div> <div class="tab col-md-4"> <img src="http://scr3.templatemonster.com/400x400/55800/55891-original.jpg" alt="" width="100%"> <h2>Web Design</h2> </div> <div class="tab col-md-4"> <img src="https://thumbs.dreamstime.com/x/vector-set-restaurant-logo-design-templates-eco-food-fast-food-sushi-pizza-icons-fish-sea-food-company-insignia-coffee-63882802.jpg" alt="" width="100%"> <h2>icons</h2> </div> <div class="tab col-md-4"> <img src="http://scr3.templatemonster.com/400x400/49300/49383-original.jpg" alt="" width="100%"> <h2>Web Design</h2> </div> <div class="tab col-md-4"> <img src="https://thumbs.dreamstime.com/x/templates-design-set-web-mail-brochures-mobile-technology-infographic-concept-modern-flat-line-icons-app-ui-interface-57194784.jpg" alt="" width="100%"> <h2>App Design</h2> </div> <div class="tab col-md-4"> <img src="https://thumbs.dreamstime.com/x/vector-set-restaurant-logo-design-templates-eco-food-fast-food-sushi-pizza-icons-fish-sea-food-company-insignia-coffee-63882793.jpg" alt="" width="100%"> <h2>icons</h2> </div> </div> </div> </div> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script> <script >$(document).ready(function() { $('span:contains("all")').addClass('active'); $('span:contains("all")').click(function() { $('span:not(:contains("all"))').removeClass('active'); $(this).addClass('active'); $('.tab').show(500) }); $('span:contains("web design")').click(function() { $('span:not(:contains("Web Design"))').removeClass('active'); $(this).addClass('active'); $('.tab:contains("Web Design")').show(500); $('.tab:not(:contains("Web Design"))').hide(500); }); $('span:contains("app design")').click(function() { $('span:not(:contains("app Design"))').removeClass('active'); $(this).addClass('active'); $('.tab:contains("App Design")').show(500); $('.tab:not(:contains("App Design"))').hide(500); }); $('span:contains("icons")').click(function() { $('span:not(:contains("icons"))').removeClass('active'); $(this).addClass('active'); $('.tab:contains("icons")').show(500); $('.tab:not(:contains("icons"))').hide(500); }); }); //# sourceURL=pen.js </script> </body></html>

Related: See More

Paper Dashboard
Filter elements, sidebar filter panel bootstrap 4
Easy Table Filter
Panel Tables with Filter

Questions / Comments: