How to embed bootstrap 3 steps progress?
I want you to have an inline element next to the progress bar Bootstrap 3
like below:
Some inline element [progress bar]
Some inline element [progress bar]
Some inline element [progress bar]
I've tried the following with no luck:
- Adding
display: inline
- bar not showing - Adding
float: right
- bar not showing - Using tables to create layout - bar not showing inside
<td>
Here's a bootply with my attemps: http://www.bootply.com/9jNcnGRkUK
+3
source to share
2 answers
You can apply the Grid system like this:
<div class="container">
<div class="row">
<h3>inline</h3>
<span class="col-sm-3">Some inline element</span>
<div class="progress" class="col-sm-9">
<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
<span class="sr-only">45% Complete</span>
</div>
</div>
</div>
</div>
Try it yourself . Please note that the class col-sm-*
must be wrapped in a class row
.
+5
source to share
Why inline
? I tried inline-block
with the above width
and it works great: http://www.bootply.com/LsNz4F87Np
+3
source to share