<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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="row" style="margin-top:25px"> <ol class="show-grid col-md-8 col-md-offset-2"> <li class="col-md-4 active"> <div class="media"> <div class="pull-left" href="#"> <span class="glyphicon glyphicon-user"></span> </div> <div class="media-body"> <h5 class="media-heading"><strong>Step 1:</strong></h5> Company Sign Up </div> </div> </li> <li class="col-md-4 inactive"> <div class="media"> <div class="pull-left" href="#"> <span class="glyphicon glyphicon-book"></span> </div> <div class="media-body"> <h5 class="media-heading"><strong>Step 2:</strong></h5> Choose your plan </div> </div> </li> <li class="col-md-4 inactive"> <div class="media"> <div class="pull-left" href="#"> <span class="glyphicon glyphicon-dashboard"></span> </div> <div class="media-body"> <h5 class="media-heading"><strong>Step 3:</strong></h5> Go to your dashboard </div> </div> </li> </ol> </div>

.show-grid [class^=col-] { padding-top: 10px; padding-bottom: 10px; border: 1px solid #ddd; border: 1px solid rgba(86,61,124,.2); list-style: none; } .glyphicon { margin-top: 5px; margin-bottom: 10px; font-size: 35px; } .inactive { color: #ccc; background-color: #fafafa; }