5

on the twitter bootstrap there are examples of the features and the examples are contained in DIVs with the class 'bs-docs-example'. every such DIV has the string 'Example' written in the upper left corner. i want to know where is that string coming from and if i can use/customize it?

2 Answers 2

7

If you take a look at the Github for Bootstrap you'll see that .bs-docs-example has content: "Example" set for ::after (for explanation on how to manage content with CSS3 see here).

Basically, .bs-docs-example has this style attached to it:

.bs-docs-example::after
{
    content: "Example";
    position: absolute;
    top: -1px;
    left: -1px;
    padding: 3px 7px;
    font-size: 12px;
    font-weight: bold;
    background-color: whiteSmoke;
    border: 1px solid #DDD;
    color: #9DA0A4;
    -webkit-border-radius: 4px 0 4px 0;
    -moz-border-radius: 4px 0 4px 0;
    border-radius: 4px 0 4px 0;
}

If you modify content member you'll modify the text.

1
  • thx, it worked :) apart from that i also had to change the position 'bs-docs-example' class to relative.
    – gooy
    Sep 13, 2012 at 12:11
0

I know it's a little late, but I also wanted the same feature, but wanted to put custom text in place of the word example. I came up with a quick little work around using existing bootstrap code that is very close, no hacking the bootstrap needed.

Maybe this can help someone else out that's looking

<div class="row">    
  <div class="span12 thumbnail">
    <span class="thumbnail span1 muted text-center" style="margin-top:-5px; margin-left:-5px; background-color:#f5f5f5;">
      <small><strong>YOUR CUSTOM TEXT</strong></small>
    </span>    
  </div>
</div>

Basically you use the thumbnail class to get the border around your div, then use it again in a nested div and offset it and change the background color. It looks extremely close except for the upper right and bottom left corners are slightly curved, However you can put whatever you want in the box, text, links etc..

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.