title: Bootstrap Bread Crumbs content and stacking
body: <p>So I am using bootstrap breadcrumbs for some form page but I cannot get the active tag to be used on the content and the stacking when I make the page smaller doesn't go well because of the classes. Long story short, this is what I want to do <a href="https://i.stack.imgur.com/BUNkO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BUNkO.png" alt="First picture"></a><br>
  and this is what I get <a href="https://i.stack.imgur.com/3L819.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3L819.png" alt="Second Picture"></a><br>
  So this is the html code.</p>
  
  <pre><code>    &lt;!-- BREAD CRUMBS --&gt;
  &lt;section class="borrow_breadcrumbs"&gt;
    &lt;ol class="breadcrumb text-center"&gt;
      &lt;li class="active"&gt;&lt;img src="img/star.png"&gt;&lt;div class="bc"&gt;Credit rating&lt;/div&gt;&lt;/li&gt;
      &lt;li&gt;&lt;img class="fix" src="img/img2.png"&gt;&lt;div class="bc"&gt;Select your loan&lt;/div&gt;&lt;/li&gt;
      &lt;li&gt;&lt;img src="img/img3.png"&gt;&lt;div class="bc"&gt;Confirmation&lt;/div&gt;&lt;/li&gt;
      &lt;li&gt;&lt;img src="img/img4.png"&gt;&lt;div class="bc"&gt;Get your loan&lt;/div&gt;&lt;/li&gt;
      &lt;/ol&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>And here is the CSS</p>
  
  <pre><code> .borrow_breadcrumbs{
    width:100%;
  }
  
  .borrow_breadcrumbs .bc{
    margin-top: 10px;
    color: #666666;
    font-size: 14px;
  
  }
  .borrow_breadcrumbs ol{
    border-bottom: 1px solid rgba(39, 38, 38, 0.25);
    border-top: 1px solid rgba(39, 38, 38, 0.25);
  }
  .borrow_breadcrumbs li{
    padding:20px 50px;
  }
  
  .borrow_breadcrumbs .breadcrumb &gt; li + li:before {
    content: "---------"
  }
  .borrow_breadcrumbs .breadcrumb &gt; .active {
  
    background-color: rgba(63, 255, 0, 0.18);
  }
  </code></pre>
  
  <p>Ignore the border on both sides, it came during taking the picture. And the img I used are already green so as you can see in the second picture so All i need to do now for testing is make hr line on the right part of active and some how get a line like that and make it stack properly on smaller device.</p>
  
  <p><a href="https://www.dropbox.com/s/cf8p8s13jpyamz2/stack.zip?dl=0" rel="nofollow noreferrer">Bread CRUMB</a> Here is the FILE if you can help me edit it then it would be better.</p>