Horizontal Line Inside a Tab in HTML - html

Question

I'm following these pages to create a horizontal line :
horizontal line and right way to code it in html, css
http://www.w3schools.com/tags/tag_hr.asp
http://www.jacklmoore.com/notes/jquery-tabs/
but It seems that It doesn't work inside my tab element. Here is my code :
<div class="container-fluid">
<div class="tabbable js-report-tab-container">
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<div id="circle"></div> <div class="h_line"> **<!-- horizontal line should be here -->**</div> <span id="circle"></span>
<br/><br/>
<p>Choose one of these type of reports : </p>
<input type="checkbox" name="report" value="reportValue" checked > Summary <br/>
<input type="checkbox" name="report" value="reportValue" > Candidate Details <br/>
<input type="checkbox" name="report" value="reportValue" > . . . .
</div>
<div class="tab-pane" id="tab2">
This is the second step view...
</div>
<div class="tab-pane" id="tab3">
This is the third step view...
</div>
<div class="tab-pane" id="tab4">
This is the fourth step view...
</div>
</div> {{-- end of tab-content --}}
</div> {{-- end of tabbable --}}
</div>
<style type="text/css">
#circle {
width: 40px;
height: 40px;
background: blue;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
float: left;
}
.hline {
width:100%;
height:13px;
background: #ff0000;
clear:both;
display:inline;
}
hr{
display:inline;
margin-top: 0.5em;
border-width: 0.5px;
border-style: inset;
margin-bottom: 0.5em;
height:2px;
background: #00FF00;
width: 20%;
align:left;
</style>
I have tried to use <hr align="left" /> and with css style :
hr{
display:block;
margin-top: 2.5em;
border-width: 1px;
border-style: inset;
margin-bottom: 0.5em;
border-top:1px solid;
height:2px;
background: #00FF00;
width: 20%;
align:left;
}
the result is like this :
I also tried to use <div class="block_1">Lorem</div> <div class="h_line"></div>
css : .hline { width:30%; height:13px; background: #fff }
Result is nothing :
Is there something I missed here...?? My goal is to create a horizontal between those 2 circles..
Thanks in advance... Need heelp here.. :)

Answer 1

I'm not entirely clear on what you're looking for, but here is one method of rendering a horizontal line between numbered circles. I've used something like this for a progress indicator in the past.
.circles {
border-bottom: 10px solid #000;
display: block;
height: 0;
list-style-type: none;
margin: 15px auto;
position: relative;
width: 80%;
}
.circle {
background: #00f;
border-radius: 50%;
color: #fff;
height: 40px;
line-height: 40px;
margin: -20px 0 0 -20px;
position: absolute;
text-align: center;
top: 5px;
width: 40px;
}
.circle:nth-child(1) {
left: 0;
}
.circle:nth-child(2) {
left: 50%;
}
.circle:nth-child(3) {
left: 100%;
}
<p>Lorem ipsum dolor sit amet.</p>
<ul class="circles">
<li class="circle">1</li>
<li class="circle">2</li>
<li class="circle">3</li>
</ul>
<p>Lorem ipsum dolor sit amet.</p>

Answer 2

I would suggest using Bootstrap's columns to do something like this:
<div class="row">
<div class="col-md-2"><div class="circle"></div></div>
<div class="col-md-8"><hr /></div>
<div class="col-md-2"><div class="circle"></div></div>
</div>