CODEWITHSUNDEEP
csstwitter-bootstrap
Lance
Lance

Reputation: 4820

Bootstrap arrow that's attached to div

I'm very very new to bootstrap and front-end frameworks in general. But, I am able to notice the characteristics that sites that use bootstrap have in common. The following picture contains something that I find to be very ubiquitous amongst bootstrap sites. The downward (or any direction) blue arrow that's pointing the the text below it is what I'm referring too.

I used firebug to inspect the elements and found it to be something that was relevant to the .hero-unit div.

How exactly does this work and how is it accomplished?

Downward arrow

Upvotes: 3

Views: 12338

Answers (2)

Schmalzy
Schmalzy

Reputation: 17324

It doesn't come standard with bootstrap but Here is a good article on how to do with :after which I believe is what you are looking for.

Demo

.hero:after {
    z-index: -1;
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -10px;
    content:'';
    width: 0;
    height: 0;
    border-top: solid 10px #e15915;
    border-left: solid 10px transparent;
    border-right: solid 10px transparent;
}

You make the triangle larger and smaller by adjusting the border-* attributes, and also the margin-left(border * -1).

Upvotes: 12

patrick
patrick

Reputation: 881

Here is what you found in firebug. Hero Unit does refer to a jumbotron-style header, a large header element that can be used in bootstrap. You can find this element here:

http://getbootstrap.com/2.3.2/components.html#typography

Still the arrow you are referring to seems to be something that has been designed by the developer and does not come with the bootstrap unit.

Upvotes: 2

Related Questions