How does bootstrap create the "Example" tab on divs in their docs? - html

Question

I tried to look at the code but am unable to determine how this gets placed above the divs. Also, googling "tabs on div", "nested tabs on div" didn't seem to show anything relevant so my terminology is off.

Answer 1

I imagine they used an absolutely positioned <div>.
Demo:
Output:
CSS:
#container {
border: 1px solid lightgrey;
border-radius: 5px;
height: 100px;
position: relative;
width: 200px;
}
.tab {
background-color: rgb( 242, 242, 242 );
border-right: 1px solid lightgrey;
border-bottom: 1px solid lightgrey;
border-radius: 0 0 5px 0;
color: grey;
display: inline-block;
font: 12px Arial;
left: 0;
padding: 5px;
position: absolute;
top: 0;
}
HTML:
<div id="container"><div class="tab">Example</div></div>

Answer 2

Just use this:
CSS
.bs-docs-example {
position: relative;
margin: 15px 5px;
padding: 39px 19px 14px;
*padding-top: 19px;
background-color: #fff;
border: 1px solid #ddd;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.bs-docs-example:after {
content: "Condiciones de uso";
position: absolute;
top: -1px;
left: -1px;
padding: 3px 7px;
font-size: 12px;
font-weight: bold;
background-color: #f5f5f5;
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;
}
HTML
<div id="content">
<div class="container">
<div class="bs-docs-example" style="text-align: justify;">
<h2>Header</h2>
<p>Paragraph</p>
</div>
</div>
</div>
DEMO