Is it possible to have a button group, but one of the elements being a label.

Similar how Input Groups work with Input Groups Addon.

I basically want the button to look like a button but not have any effect when hovered over.

Best effort at the moment is using <a> with disabled, but that makes the colour slightly different to the rest of the page.

/

Is it possible to have a button group, but one of the elements being a label.

Similar how Input Groups work with Input Groups Addon.

I basically want the button to look like a button but not have any effect when hovered over.

Best effort at the moment is using <a> with disabled, but that makes the colour slightly different to the rest of the page.

http://jsfiddle/sctqg038/

• javascript
• css
• twitter-bootstrap
• twitter-bootstrap-3

• I think that <a> with the disabled attribute looks pretty good. What is the color that is different from the rest of the page? If you mean the green, that is because you have btn-success. You could change it to btn-default. If you are talking about something else, I'm sure you can override it with CSS. Here is a fiddle with btn-default used: jsfiddle/sctqg038/1 – Cave Johnson Commented Mar 15, 2017 at 22:19
• But I think what you have is the best option. It appears that there is no built-in way to do what you want. – Cave Johnson Commented Mar 15, 2017 at 22:19
• Right now thinking of just adding 'btn-succes-disabled' class and override the disabled colour to fit the rest of the page – Michal Ciechan Commented Mar 15, 2017 at 22:24

1 Answer 1

I have updated the Fiddle. Just add a id to the button you want to use as a label and give the following css pointer-events:none. It won't change the button color.

Updated Fiddle

snippet

@import url('https://maxcdn.bootstrapcdn./bootstrap/3.3.7/css/bootstrap.min.css');
#label-btn {
  pointer-events: none;
}

<div class="btn-group">
    <a href="#" role="button" class="btn btn-success btn-xs" id="label-btn"  aria-disabled="true">T</a>
    <button type="button" class="btn btn-default btn-xs" aria-label="Import" data-toggle="tooltip" title="Import">
        <span class="glyphicon glyphicon-import" aria-hidden="true"></span>
    </button>
</div>