How to properly center steps in bootstrap? - css

Question

As you can see the steps in image are not centered well. May be someone has some suggestions how to center it properly ?
CSS:
.stepwizard-step p {
margin-top: 10px;
}
.stepwizard-row {
display: table-row;
}
.stepwizard {
display: table;
width: 100%;
position: relative;
}
.stepwizard-step button[disabled] {
opacity: 1 !important;
filter: alpha(opacity=100) !important;
}
.stepwizard-row:before {
top: 14px;
bottom: 0;
position: absolute;
content: " ";
width: 100%;
height: 1px;
background-color: #ccc;
z-order: 0;
}
.stepwizard-step {
display: table-cell;
text-align: center;
position: relative;
/*width: 70px*/
}
HTML:
<div class="stepwizard">
<div class="stepwizard-row">
<div class="stepwizard-step">
<button type="button" class="btn btn-default">1</button>
<p>Uploading</p>
</div>
<div class="stepwizard-step">
<button type="button" class="btn btn-default">2</button>
<p>Parsing</p>
</div>
<div class="stepwizard-step">
<button type="button" class="btn btn-default">3</button>
<p>Downloading</p>
</div>
<div class="stepwizard-step">
<button type="button" class="btn btn-default">4</button>
<p>Showing</p>
</div>
</div>
</div>
FIDDLE

Answer 1

I'm assuming you're talking about the horizontal distance between the steps not being of equal size. This is due to the text of the step, e.g. Uploading, being part of the table cell. The width of the table is distributed to the table cells based on the width of their contents, a cell with more text will therefore become wider than one with less text.
The easiest way to solve this might be to take the text of the step outside of the document flow by giving it a position: absolute, width: 100% and text-align: center.
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css');
.stepwizard-step p {
margin-top: 10px;
}
.stepwizard-row {
display: table-row;
}
.stepwizard {
display: table;
width: 100%;
position: relative;
}
.stepwizard-step button[disabled] {
opacity: 1 !important;
filter: alpha(opacity=100) !important;
}
.stepwizard-row:before {
top: 14px;
bottom: 0;
position: absolute;
content: " ";
width: 100%;
height: 1px;
background-color: #ccc;
z-order: 0;
}
.stepwizard-step {
display: table-cell;
text-align: center;
position: relative;
/*width: 70px*/
}
.stepwizard-step p {
position: absolute;
width: 100%;
text-align: center;
}
<div class="stepwizard">
<div class="stepwizard-row">
<div class="stepwizard-step">
<button type="button" class="btn btn-default">1</button>
<p>Uploading</p>
</div>
<div class="stepwizard-step">
<button type="button" class="btn btn-default">2</button>
<p>Parsing</p>
</div>
<div class="stepwizard-step">
<button type="button" class="btn btn-default">3</button>
<p>Downloading</p>
</div>
<div class="stepwizard-step">
<button type="button" class="btn btn-default">4</button>
<p>Showing</p>
</div>
</div>
</div>

Answer 2

go by this code it may work out
html
<div class="stepwizard">
<div class="stepwizard-row row">
<div class="stepwizard-step col-md-3">
<button type="button" class="btn btn-default">1</button>
<p>Uploading</p>
</div>
<div class="stepwizard-step col-md-3">
<button type="button" class="btn btn-default">2</button>
<p>Parsing</p>
</div>
<div class="stepwizard-step col-md-3">
<button type="button" class="btn btn-default">3</button>
<p>Downloading</p>
</div>
<div class="stepwizard-step col-md-3">
<button type="button" class="btn btn-default">4</button>
<p>Showing</p>
</div>
</div>
</div>
css code
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css');
.stepwizard-step p {
margin-top: 10px;
}
.stepwizard {
width: 100%;
position: relative;
}
.stepwizard-step button[disabled] {
opacity: 1 !important;
filter: alpha(opacity=100) !important;
}
.stepwizard-row:before {
top: 14px;
bottom: 0;
position: absolute;
content: " ";
width: 100%;
height: 1px;
background-color: #ccc;
z-order: 0;
}
.stepwizard-step {
text-align: center;
position: relative;
/*width: 70px*/
}
jsfiddle

Answer 3

change only stepwizard-row:before top 14px to 18px it's center vertically.