Add buttons to linked items on list group Bootstrap

1.3k Views Asked by gabriel At 18 March 2017 at 13:26

I'm trying to implement a system and I need buttons inside linked group list. The problem is when I click on the button it opens the link of the linked item. The code bellow is what I have on my system.

edit: I need the full item to be clickable; excluding the buttons (Not using link just on the text).

<head>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
  
<a class="list-group-item list-group-item-info" href="https://www.fumep.edu.br/eep/" target="_blank">
    EEP
    <span class="pull-right">
        <div class="btn-group" role="group" aria-label="...">
            <span class="btn btn-xs btn-warning" >
                <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
            </span>
            <span class="btn btn-xs btn-danger" >
                <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
            </span>
        </div>
    </span>
</a>

Original Q&A

There are 2 best solutions below

Carol Skelly On 18 March 2017 at 13:46 BEST ANSWER

You can use CSS like this..

.list-group-item>.pull-right{
   cursor: default;
}

Add onclick="return false;" to the btn-group.

Demo

Bad Hombre On 18 March 2017 at 13:52

If you want the full item clickable except buttons, you can try this with jQuery

$('.btn-group .btn').click(function(
    e.preventDefault();
});

Add buttons to linked items on list group Bootstrap

There are 2 best solutions below

Related Questions in HTML

Related Questions in CSS

Related Questions in TWITTER-BOOTSTRAP

Related Questions in BUTTON

Related Questions in ITEMGROUP

Trending Questions

Popular # Hahtags

Popular Questions