Bootstrap arrow that's attached to div

css, twitter-bootstrap

Solution

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).

Problem

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?

Original source