"example" heading in twitter bootstrap

Question

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?

Answer 1

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.