CODEWITHSUNDEEP
htmlcsslayouttwitter-bootstrapresponsive-design
user1438003
user1438003

Reputation: 6783

Show text in the top-right corner, like in docs?

The new twitter-bootstrap docs have a nice interface for delimiting examples.

scrnshot

How do I get this same effect, but within the well?

My attempt: http://jsfiddle.net/YdusM/

Upvotes: 1

Views: 1002

Answers (3)

Pevara
Pevara

Reputation: 14310

You can just inspect the code in the docs, and you wil find this css, applied to the exmaple wrapper:

.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;
}

Add something similar as a custom class to your css, or you could even do it in less to use the bootstrap variables and mixins. If you want the text to be addaptable, it would perhaps be better to forget about the :after and adapt this styling a bit to apply it to a specific element holding the text you want and place it inside the wrapper.

edit:
For the positioning to work, you should set the wrapper to position: relative; as well. Not sure what you are after, but i updated your fiddle to demonstrate: http://jsfiddle.net/YdusM/9/

Upvotes: 0

Serhii Holinei
Serhii Holinei

Reputation: 5864

How about that: jsFiddle

Apply .well:before {...} instead .corner_text:before {...}

UPDATE:

Apply 'example element' for specific well-block: jsFiddle

Upvotes: 1

Nithin Emmanuel
Nithin Emmanuel

Reputation: 977

Instead of applying :before to outer div. I made it to .well and adjusted the padding top and left to -20px..

ie 

.well:before {
  position: relative;
  content: "Example";
  top: -20px;
  left: -20px;
  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;
}

Check the fiddle http://jsfiddle.net/YdusM/7/

Upvotes: 0

Related Questions