Skip to content

Instantly share code, notes, and snippets.

@peterblazejewicz

peterblazejewicz/jsbin.bimub.css

Created May 10, 2014 08:22
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save peterblazejewicz/35e5a1fddcaee7d27d99 to your computer and use it in GitHub Desktop.
Save peterblazejewicz/35e5a1fddcaee7d27d99 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
jsbin.bimub.css
.progress-steps {
display: table;
position: relative;
width: 100%;
}
.progress-steps > .row {
display: table-cell;
width: 100%;
}
.progress-steps .row:before {
top: 14px;
bottom: 0;
position: absolute;
content: " ";
width: 100%;
height: 1px;
background-color: #333;
}
.progress-steps .progress-step {
display: table-cell;
text-align: center;
vertical-align: middle;
position: relative;
}
.btn-circle {
width: 30px;
height: 30px;
text-align: center;
padding: 6px 0;
font-size: 12px;
line-height: 1.428571429;
border-radius: 15px;
}
.btn-circle[disabled] {
background: #fff;
opacity: initial;
}
Raw
jsbin.bimub.html
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" type="text/css" />
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div>
<div class="container">
<div class="row">
<div class="col-xs-12 progress-steps">
<div class="row">
<div class="col-xs-4 progress-step">
<button type="button" class="btn btn-default btn-circle" disabled="disabled">1</button>
<p>Logowanie</p>
</div>
<div class="col-xs-4 progress-step">
<button type="button" class="btn btn-primary btn-circle">2</button>
<p>Dostawa</p>
</div>
<div class="col-xs-4 progress-step">
<button type="button" class="btn btn-default btn-circle" disabled="disabled">3</button>
<p>Potwierdzenie</p>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment