<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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 ----------> <div class="container"> <div class="row"> <div class="line hidden-xs"></div> <div class="col-sm-10 col-sm-offset-2 text-center"> <div class="col-sm-2"> <span class="glyphicon glyphicon-briefcase"></span> <h4>Brief</h4> </div> <div class="col-sm-2"> <span class="glyphicon glyphicon-search"></span> <h4>Research</h4> </div> <div class="col-sm-2"> <span class="glyphicon glyphicon-pencil"></span> <h4>Sketch</h3> </div> <div class="col-sm-2"> <span class="glyphicon glyphicon-cog"></span> <h4>Build</h4> </div> <div class="col-sm-2"> <span class="glyphicon glyphicon-send"></span> <h4>Deliver</h4> </div> </div> </div> </div>

.glyphicon { border-radius:50%; border: 2px #ddd solid; padding:20px; font-size:24px; background-color:#fff; color:#999; } .glyphicon:hover { border-radius:50%; color:#fff; background-color:#ddd; } .line { max-width:55%; min-height:2px; background-color: #ddd; margin-top:70px; margin-bottom:-35px; margin-left:auto; margin-right:auto; }