Twitter Bootstrap Question posted in

Standardized way of graying out normal HTML text – Twitter bootstrap

Is there a standardized way of graying (greying) out text that is meant to be ignored, either in HTML, or bootstrap?

I tried looking at both how Slack styles the “(edited)” text, and how Twitter itself (twitter.com) styles timestamps, and it seems they just change the font color. It just seems strange to me that an arbitrary font color is chosen without any semantic information is attached to it, or even a standardized shade of gray.

The bootstrap documentation mentions some semantic colors, but gray isn’t included in them – gray is only mentioned in grayscale.

Tags:

3

Answers


  1. 0

    Standard HTML Input Forms

    An example of this is disabling HTML input elements, though there’s not a standard display of that across browsers.

    http://codepen.io/anthonyastige/pen/dXNEmx

    <input type=button value="I can do all the things">
<input type=button value="I'm disabled" disabled>

    Bootstrap Input Forms

    There’s also the concept of disabling input elements here with the .disabled class

    https://getbootstrap.com/css/#checkboxes-and-radios

    Bootstrap text

    The .text-muted class implies disabled, though the specs don’t say exactly what it means.

    https://getbootstrap.com/css/#helper-classes

    Login or Signup to reply.
  2. 0

    There is actually a standard way to do it, in bootstrap, which is to use to use text-muted.

    In fact, there is a list of standard text shades and colors that are applied directly.

    http://www.w3schools.com/bootstrap/bootstrap_ref_css_helpers.asp

    As for HTML, having a CSS with a disabled class and applying that to any of your text would be a better option.

    Login or Signup to reply.
  3. 0

    See samples below:

    <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>


<fieldset disabled>
  <div class="form-group">
    <label for="inputText">Disabled input</label>
    <input class="form-control" id="inputText" type="text" placeholder="Disabled Input" disabled>
    <p class="help-block">Example block-level help-block class text here.</p>
    <p class="text-muted">Example block-level with text-muted class.</p>
  </div>
  <div class="form-group">
    <label for="optionSelect">Disabled select menu</label>
    <select id="optionSelect" class="form-control">
      <option>Select Value</option>
    </select>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox">Disabled Checkbox
    </label>
  </div>
  <button type="submit" class="btn btn-primary">Disabled Button</button>
</fieldset>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search