How can i make it through using bootstrap grid? - html

Question

The Above image shows this is how i want to make it.I have alignment display issue and line doesn't gets displayed. how can i achieve using with bootstrap grid.I want it make responsive. please advise where i am making mistake and how can i make it happen.
plunker link
I wan to see like this
<div class="container-fluid" style="background: white;">
<div class="row">
<div class="col-lg-9 col-xs-12 ">
<div class="parent col-md-3 col-xs-3">
<div class="child circle col-md-1 col-xs-1">1</div>
<div class="expenseItems col-md-1 col-xs-1">Text1</div>
<div class="hrcol-md-1 col-xs-1"></div>
</div>
<div class="parent col-md-3 col-xs-3">
<div class="child circle col-md-1 col-xs-1">2</div>
<div class="expenseItems col-md-2 col-xs-2">Text2</div>
<div class="hr col-md-1 col-xs-1"></div>
</div>
<div class="parent col-md-3 col-xs-3">
<div class="child circle col-md-1 col-xs-1">3</div>
<div class="expenseItems col-md-2 col-xs-2">Text3</div>
<div class="hr col-md-1 col-xs-1"></div>
</div>
<div class="parent col-md-3 col-xs-3">
<div class="child circle col-md-1 col-xs-1">4</div>
<div class="expenseItems col-md-2 col-xs-2">Text4</div>
<div class="hr col-md-1 col-xs-1"></div>
</div>
</div>
</div>
CSS
/*For drawing line*/
.hr {
color: gray;
background: gray;
width: 5px;
height: 1px;
margin-top:4px;
}
.circle
{
width: 28%;
border-radius: 100%;
text-align: center;
font-size: 14pt;
padding: 1pt;
position: relative;
background: gray;
color: white;
margin-top:11pt;
}
/*Parent div*/
.parent {
border-style: dashed;
border-width: 1px;
padding: 25px;
display:inline-block;
background-color:Aqua;
}
.child {
float: left;
background-color:Orange;
}
.expenseItems {
display: inline-block;
background-color:Green;
}

Answer 1

Using columns to acheive alignment inside other columns doesn't really make much sense when you can simply use a display property to do this with the content inside a column.
Use display: inline-block and remove all the nested columns.
Working Example: Open at FullPage
/*Use this rule below adjust the space between columns*/
.no-gutter > [class*='col-'] {
padding-right: 1px;
padding-left: 1px;
}
/*Use the above to adjust the space between columns*/
.parent {
border: 1px dashed red;
padding: 20px 25px 25px;
}
.circle {
width: 25px;
height: 25px;
border-radius: 50%;
padding-top: 3px;
display: inline-block;
text-align: center;
background-color: red;
color: white;
}
.expenseItems {
padding: 10px;
display: inline-block;
color: red;
}
.hr {
background: red;
height: 2px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row no-gutter">
<div class="col-sm-3">
<div class="parent">
<div class="circle">1</div>
<div class="expenseItems">TEXT</div>
<div class="hr"></div>
</div>
</div>
<div class="col-sm-3">
<div class="parent">
<div class="circle">1</div>
<div class="expenseItems">TEXT</div>
<div class="hr"></div>
</div>
</div>
<div class="col-sm-3">
<div class="parent">
<div class="circle">1</div>
<div class="expenseItems">TEXT</div>
<div class="hr"></div>
</div>
</div>
<div class="col-sm-3">
<div class="parent">
<div class="circle">1</div>
<div class="expenseItems">TEXT</div>
<div class="hr"></div>
</div>
</div>
</div>
</div>