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
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.
-
thx, it worked :) apart from that i also had to change the position 'bs-docs-example' class to relative.– gooySep 13, 2012 at 12:11
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..