Material Design Lite Navbar

Learn to create a navbar using Material Design Lite. See the Pen Material Design Lite: Header and Navigation by Brandon Himpfen (@brandonhimpfen) on CodePen. HTML <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header"> <header class="custom-header mdl-layout__header mdl-layout__header--waterfall"> <div class="mdl-layout_…

Search Button using Bootstrap

Create a search input box and button group using Bootstrap. See the Pen Search Button using Bootstrap by Brandon Himpfen (@brandonhimpfen) on CodePen. HTML<div class="input-group"> <input type="text" class="form-control" placeholder="Search for..."> <span class=…

Masthead using Sass

Create a masthead using Sass language. See the Pen Masthead by Brandon Himpfen (@brandonhimpfen) on CodePen. Download Now!HTML<div class="masthead"> <h1>Welcome.</h1> </div> <div class="container"> <div class="content">…

Center Align Bootstrap Nav Pills

This tutorial will show you how to center align nav pills in Bootstrap. See the Pen Center Align Bootstrap Nav Pills by Brandon Himpfen (@brandonhimpfen) on CodePen. HTML<div class="centered-pills"> <ul class="nav nav-pills"> <li class="nav-item">…

Link Hover Underline Gradient

Apply a gradient to the underline of your links when hovered. See the Pen Link Hover Underline Gradient by Brandon Himpfen (@brandonhimpfen) on CodePen. HTML<a href="#">Pellentesque habitant morbi</a> CSSa { position: relative; padding-bottom: 2px; text-decoration: none; } a:hover::after { content: ""…

Bouncing Loader using CSS

Create bouncing loader animation using CSS. See the Pen Bouncing Loader by Brandon Himpfen (@brandonhimpfen) on CodePen. You can change the colour of the loader in the .bouncing-loader > div CSS class.…

highlight.js Example

Highlight.js is a syntax highlighter written in JavaScript. It works in the browser as well as on the server. It works with pretty much any markup, doesn’t depend on any framework, and has automatic language detection. See the Pen highlight.js Example by Brandon Himpfen (@brandonhimpfen) on CodePen.…