Question

I need to create inline element to control collapsible element. I’ve created the following:

<label class="control-label" for="surname">Surname</label>
<div class="controls">
  <input type="text" class="input-xlarge" id="surname">
  <p class="help-block">Input your surname. <a data-toggle="collapse" data-target="#surname-more">More...</a></p>
  <div id="surname-more" class="help-block collapse in">Additional information about surname will be here.</div>
</div>

So, such element is a here. But it looks bad (blue link within grey text). Is there any standard Twitter Bootstrap class, which should be used in such scenario?

Answer 1

Applying the help-block style to the link makes the “More…” text gray, but the link still shows the dark blue color when you hovered over the link.

I would write your own custom style to handle this:

    .help-block-link {
      color: #999;
    }

    .help-block-link:hover {
      color: #333;
      text-decoration: none;
      cursor: pointer;
    }

<a data-toggle="collapse" data-target="#surname-more" class="help-block-link">More...</a>