"span"
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/tutsplus/pen/JdLzRv?depth=everything&limit=all&order=popularity&page=10&q=material+&show_forks=false" /> <style class="cp-pen-styles">body { background: #fafafa; padding: 40px 0 0; } /* use section to lay out flex items */ section { display: flex; flex-direction: column; align-items: center; } .material-icons.icon, .material-label { font-size: 3em; line-height: 1; display: block; color: #424242; margin: .5em 0 } .material-icons.mdl-badge[data-badge]::after, .material-label.mdl-badge[data-badge]::after{ font-size: .3em; width: 2em; height: 2em; } .material-icons.mdl-badge[data-badge]::after { top: -1em; right: -1em; }</style></head><body> <html> <head> <!-- Material Design Lite --> <script src="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.min.js"></script> <link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.indigo-pink.min.css"> <!-- Material Design icon font --> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> </head> <body> <section> <!-- Number badge --> <div class="material-label mdl-badge" data-badge="4">Inbox</div> <!-- Icon badge on icon --> <div class="icon material-icons mdl-badge" data-badge="♥">account_box</div> </section> </body> </html> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script> <script > //# sourceURL=pen.js </script> </body></html>

Related: See More

Awesome Landing Page

Questions / Comments: