Bootstrap equivalent of HTML5Boilerplate's .visuallyhidden

Question

Is there a Twitter Bootstrap equivalent of HTML5Boilerplate's .visuallyhidden non-semantic helper class? I can't see anything similar in the CSS files. The purpose of the .visuallyhidden class is to visually hide it, but make the text available to screenreaders. Is there a different Bootstrappy approach to achieve the same goal?

// HTML5Boilerplate's non-semantic helper class
.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}  

The related Bootstrap non-semantic helper classes don't achieve the same effect:

// Some of Twitter Bootstrap's non-semantic helper classes
.hide {
    display: none;
}

.invisible {
    visibility: hidden;
}

Hindbrain

Answer 1

You can use the Bootstrap class .sr-only either in your HTML (non-semantic) or as a mixin. Here's the definition:

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
}

Indebtedness

Added : white-space:nowrap – Roseliaroselin

Answer 2

Well,

.text-hide {
    background-color: transparent;
    color: transparent;
    border: 0;
    font: 0/0 a;
    text-shadow: none;
}

Edit 2013-11-25: In Bootstrap v3.0.1 (as Dean stated correctly in his comment below) .text-hide does partly what you want. Earlier than that up to Bootstrap v3 the class name was .hide-text.
It's originally meant for image-replacement, therefore it leaves the 'display' property unchanged.

See https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757 for a full explanation of all properties in this rule, like the wonderful 0/0 a workaround for CSS validator.

One further reading on the .hide-text class:
https://github.com/twitter/bootstrap/issues/2362#issuecomment-4501223

There's also an issue filed in Bootstrap with your question: https://github.com/twitter/bootstrap/issues/6452

Acceptor

And please think about, if it's necessary to put non-semantic classes into source! ;) – Acceptor

Hi Volker, Actually I use Compass/SASS so I don't use them in a non-semantic way. I use them as 'mixins' applied to various elements in the CSS (SASS). Thanks for pointing out the pull-request. I'll wait till it appears in the Compass plugins I'm using. – Hindbrain

Quote from Bootstrap source: Heads up! v3 launched with with only .hide-text(), but per our pattern for mixins being reused as classes with the same name, this doesn't hold up. As of v3.0.1 we have added .text-hide() and deprecated .hide-text(). So use .text-hide. – Middaugh