title: Bootstrap - Buttons inside List Group Item
body: <p>I want to create a Web GUI, which is seperated into 2 parts: A list of different actions, implemented as a Bootstrap List Group and a detail area where settings of those actions can be changed.</p>
  
  <p>Clicking on the item should display the detail/settings section for that action.</p>
  
  <p>I also want quick-actions, which are small buttons on the right side of the List Group items.</p>
  
  <p>This concept works in Bootstrap, but me IDE gives me warnings about the nested buttons/links. The big problem is, that this is not valid HTML5 and could lead to wrong results. An error I already noticed is, that clicking a small button also executes the list item action in Firefox.</p>
  
  <p>Here is an example of the GUI concept, as this is hard to describe in words: <a href="https://jsfiddle.net/drx7xhw7/" rel="noreferrer">https://jsfiddle.net/drx7xhw7/</a></p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-md-4"&gt;
        &lt;h3&gt;Actions&lt;/h3&gt;
        &lt;div class="list-group"&gt;
          &lt;a class="list-group-item clearfix" onclick="alert('Action1 -&gt; Details');"&gt;
            Action1
            &lt;span class="pull-right"&gt;
              &lt;button type="button" class="btn btn-xs btn-default" onclick="alert('Action1 -&gt; Play');"&gt;
                &lt;span class="glyphicon glyphicon-play" aria-hidden="true"&gt;&lt;/span&gt;
              &lt;/button&gt;
            &lt;/span&gt;
          &lt;/a&gt;
          &lt;a class="list-group-item clearfix" onclick="alert('Action2 -&gt; Details');"&gt;
            Action2
            &lt;span class="pull-right"&gt;
              &lt;button type="button" class="btn btn-xs btn-default" onclick="alert('Action2 -&gt; Play');"&gt;
                &lt;span class="glyphicon glyphicon-play" aria-hidden="true"&gt;&lt;/span&gt;
              &lt;/button&gt;
            &lt;/span&gt;
          &lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="col-md-8"&gt;
        &lt;h3&gt;Settings&lt;/h3&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Is there an easy way of having exactly the same GUI but using valid HTML5?</p>