Bootstrap – Buttons inside List Group Item

Bootstrap – Buttons inside List Group Item

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.
Clicking on the item should display the detail/settings section for that action.
I also want quick-actions, which are small buttons on the right side of the List Group items.
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.
Here is an example of the GUI concept, as this is hard to describe in words: https://jsfiddle.net/drx7xhw7/

Actions

Settings

Is there an easy way of having exactly the same GUI but using valid HTML5?

Related:  How to prevent background scrolling when Bootstrap 3 modal open on mobile browsers?

Solutions/Answers:

Solution 1:

@Kim: If you still want to achieve the same with Bootstrap in the valid HTML Standard, use the following code. I changed the button to span and added the same class btn btn-xs btn-default.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />

<div class="container">
    <div class="row">
        <div class="col-md-4">
            <h3>Actions</h3>
            <div class="list-group">
                <a class="list-group-item clearfix" onclick="alert('Action1 -> Details');">
                    Action1
                    <span class="pull-right">
                        <span class="btn btn-xs btn-default" onclick="alert('Action1 -> Play'); event.stopPropagation();">
                            <span class="glyphicon glyphicon-play" aria-hidden="true"></span>
                        </span>
                    </span>
                </a>
                <a class="list-group-item clearfix" onclick="alert('Action2 -> Details');">
                    Action2
                    <span class="pull-right">
                        <span class="btn btn-xs btn-default" onclick="alert('Action2 -> Play'); event.stopPropagation();">
                            <span class="glyphicon glyphicon-play" aria-hidden="true"></span>
                        </span>
                    </span>
                </a>
            </div>
        </div>

        <div class="col-md-8">
            <h3>Settings</h3>
        </div>
    </div>
</div>

References