twitter bootstrap - custom btn-group class on td with less -

i want able use td btn-group, custom class cant work correctly

markup

<td class="actions">     <a href="/foo/bar" class="btn"><span class="fa fa-edit fa-lg "></span> edit</a>     <a href="#" data-toggle="dropdown" class="btn btn-default dropdown-toggle"><span class="fa fa-caret-down fa-lg "></span></a>     <ul class="dropdown-menu">         <li><a href="/foo/bar"><span class="fa fa-times fa-lg "></span> delete</a></li>         <li><a href="/foo/bar"><span class="fa fa-times fa-lg "></span> delete</a></li>         <li><a href="/foo/bar"><span class="fa fa-times fa-lg "></span> delete</a></li>     </ul> </td> 

less

td {     &.actions {         > {             .pull-left;             .button-size(@padding-xs-vertical; @padding-xs-horizontal; @font-size-small; @line-height-small; @border-radius-small);             &:first-child {                 .button-variant(@btn-default-color; @btn-default-bg; @btn-default-border);             }         }     } } 

i have tried couple things such &.actions:extend(:btn-group)

but toggle not show ul , not create button group (eg: buttons have rounded corners way round)

adding btn-group class td , works fine.

assembling answer comments above. in case extend all should used since .btn-group not single "flat" style set of selectors/rulesets quite complex nesting hierarchy, so:

td {     &.actions:extend(.btn-group all) {         // ...     } } 

although because of #2206 bug might more safe write as:

td {     &.actions {         &:extend(.btn-group all);         // ...     } }