<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="stepwizard"> <div class="stepwizard-row"> <div class="stepwizard-step"> <button type="button" class="btn btn-default btn-square">1</button> </div> </div> <div class="stepwizard-row"> <div class="stepwizard-step"> <button type="button" class="btn btn-primary btn-square">2</button> </div> </div> <div class="stepwizard-row"> <div class="stepwizard-step"> <button type="button" class="btn btn-default btn-square" disabled="disabled">3</button> </div> </div> </div> </div>

body{ margin: 40px 50%; } .stepwizard { /* весь блок */ display: table; width: 30px; /* ограничимся шириной .btn-square */ height: 400px; /* высота */ position: relative; } .stepwizard-row { display: table-row; } .stepwizard-step button[disabled] { opacity: 1 !important; filter: alpha(opacity=100) !important; } .stepwizard-row:before { /* линия */ position: absolute; top: 0px; /* если нужно довести донизу – вместо него поставь bottom:0px ;*/ content: " "; width: 1px; height: 70%; /* т.к. занимает 2 "ячейки" */ background-color: #ccc; } .stepwizard-step { /* каждый из 3-ёх */ display: table-cell; text-align: center; position: relative; left: -15px; z-index: 1; } .btn-square { width: 30px; height: 30px; text-align: center; padding: 6px 0; font-size: 12px; line-height: 1.428571429; /* цифры внутри */ }