Bootstrap adding a dropdown caret

Question

http://i.imgur.com/gvNOQ7p.png

As indicated above, I want to learn to make a dropdown menu with the "dropdown-caret" (circled green in the image). I viewed source of twitter and it seems that they have it as <li class="dropdown-caret"></li>, but I couldn't produce it using the Bootstrap. Is this not included in the bootstrap, or am I doing it wrongly?

In addition, how do I align the dropdown menu to left instead of the default right? As shown in the image, the dropdown menu is aligned to left.

Answer 1

Twitter bootstrap adds the caret by default if you are using dropdowns within a navigation bar. These are the CSS rules:

.navbar .nav > li > .dropdown-menu::before {
  position: absolute;
  top: -7px;
  left: 9px;
  display: inline-block;
  border-right: 7px solid transparent;
  border-bottom: 7px solid #CCC;
  border-left: 7px solid transparent;
  border-bottom-color: rgba(0, 0, 0, 0.2);
  content: '';
}

.navbar .nav > li > .dropdown-menu::after {
  position: absolute;
  top: -6px;
  left: 10px;
  display: inline-block;
  border-right: 6px solid transparent;
  border-bottom: 6px solid white;
  border-left: 6px solid transparent;
  content: '';
}

So make sure you have this DOM structure or copy the style.

Hope this helps!