html - Bootstrap Button Inside List View Not Working -

I'm trying to get a button within a list view in bootstrap to get two different links And it always follows the list view link, button does not link if I press the button. How do I achieve this?

  & lt; A href = "foo.html" class = "list-group-item" & gt; & Lt; P & gt; This link is different from that button & lt; / P & gt; & Lt; Button href = "bar.html" class = "btn btn-success" & gt; Example & lt; / Button & gt; & Lt; / A & gt;  

It is not easily complete with bootstrap, but a few tweaks we get Can we do what we want? The main problem is that nested anchors are not actually valid HTML, however, we can achieve the same results, due to which the link unaccepted is linking above a link.

Take a look at this JS bin:

In summary:

Add a new class to the list-group Our new container Define:

  & lt; Ul class = "list-group action-list-group" & gt; & Lt; Li class = "list-group-item" & gt; & Lt; One class = "list-group-link" href = "http://stackoverflow.com" & gt; Cross AllOdio & lt; / A & gt; & Lt; One class = "btn btn-sm btn-default" href = "http://google.com" & gt; Go & lt; / A & gt; & Lt; / Li & gt; & Lt; Li class = "list-group-item" & gt; & Lt; One class = "list-group-link" href = "http://stackoverflow.com" & gt; Cross AllOdio & lt; / A & gt; & Lt; One class = "btn btn-sm btn-default" href = "http://google.com" & gt; Go & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt;  

The primary link is ".list-group-link" and the secondary link is ".btn" verb.

Next we add some CSS to the style list - Action-list-group within group items:

  .action-list-group {status: relative; } / * Remove the list group padding as our nested anchor tag now has * / .action-list-group .list-group-item {padding: 0; } .action-list-group .list-group-item & gt; A.list-group-link {display: block; Receive from / * .list-group-item * / padding: 10px 15px; Color: # 555; } / * Add link style again * / .action-list-group .list-group-item & gt; A.list-group-link: Hover {background: # f5f5f5; Text-decoration: None; } .action-list-group .btn {status: absolute; Correct: 5px; Margin-top: 5px; Top: 0; }  

Where it says "heir", if you were using you sass's @include or @extend You can use .list-group-item & gt; A .