<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 ----------> <br><br><br><br> <div class="container"> <div class="row wizard"> <div class="col-md-12 header-wizard"> <div class="row"> <div class="col-md-3"> <div class="element-wizard"> <span>1</span> <label>Personal Information</label> </div> </div> <div class="col-md-3"> <div class="element-wizard"> <span>2</span> <label>Employment Information</label> </div> </div> <div class="col-md-3"> <div class="element-wizard"> <span>3</span> <label>academic teaching</label> </div> </div> <div class="col-md-3"> <div class="element-wizard"> <span>4</span> <label>Personal Perseption</label> </div> </div> </div> </div> <div class="col-md-12 body-wizard"> </div> <div class="col-md-12 footer-wizard"></div> </div> </div>

.wizard{ border:1px solid #c4c4c4; border-radius:5px; } .wizard .header-wizard{ background:#c4c4c4; height:80px; } .wizard .header-wizard .element-wizard{ border:1px solid #fff; border-top-left-radius:5px; border-bottom-right-radius:5px; color:#fff; margin-top:10px; padding:5px 2px; }