aka aka - 4 months ago 10
HTML Question

How can i make it through using bootstrap grid?

enter image description here
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
enter image description here

<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

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>