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;
}

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;
}