Question: I was refactoring some code and decided to change the usual `style="display:none"` to use the HTML5 `hidden` attribute, in order to hide a button. Only to find that it is not compatible with bootstrap's `btn` class. That said, I will keep using the style display attribute but I wonder if this is a bug that should be reported or simply a feature that everyone should be aware of.

The corresponding jsfiddle can be found [here](https://fiddle.jshell.net/56ax4phv/)

Answer: 
The HTML5 specification already warns developers about this:

> 
> **Note:** Because this attribute is typically implemented using CSS, it's also possible to override it using CSS. **For instance, a rule that applies 'display: block' to all elements will cancel the effects of the hidden attribute.** Authors therefore have to take care when writing their style sheets to make sure that the attribute is still styled as expected.
> 
> 
> — [The HTML5 Specification - 7.1 The `hidden` attribute](http://www.w3.org/TR/html5/editing.html#the-hidden-attribute)
> 
> 
> 

The problem you're having is that Bootstrap's `.btn` selector specifically defines `display: inline-block`, which overrides the `hidden` attribute's `display: none`.

This means that specificity is going to be an issue. This is a rare case of where `!important` may be desirable. I'd personally implement the following style rule:

```css
[hidden] {
  display: none !important;
}

```

This ensures that all elements with a `hidden` attribute will be set to not display, regardless of specificity. This is doubly good in that this will make the `hidden` attribute effective on any browser which supports the `[att]` selector notation (which is any browser which supports CSS2).

---

[Working JSFiddle demo](https://fiddle.jshell.net/56ax4phv/1/).
It's not hidden because bootstrap applies `display: inline-block` on the class `.btn`

Bootstrap provides the following `.hidden` class that you can use to show/hide elements. Try using that.

```
.hidden {
  display: none !important;
}

```