Bootstrap 3 Custom Li Element With Div Designing

I am using a customized li element in Bootstrap 3. What I want is something like it- . What I have done is- HTML-

• Solution 1:

  Use the .clearfix class as follows:

  <liclass="list-group-item"><divclass="inline"><div>
              1
          </div><div>
              2
          </div></div><divclass="divider-vertical"></div><divclass="inline"><div>
              3
          </div><div>
              4
          </div></div><divclass="clearfix"></div></li>

  css:

  /*  List Item Styling   */div.inline, .divider-vertical   
  {
      height: 50px;
      float:left;
  }
  
  .divider-vertical   
  {
      margin: 09px;
      border-left: 1px solid #F2F2F2;
      border-right: 1px solid #FFF;
  }
  

Share