csstwitter-bootstraphtml5boilerplate

Bootstrap equivalent of HTML5Boilerplate's .visuallyhidden


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

Solution

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