bootstrap 3 arrow on dropdown menu

Question

In bootstrap 2 the dropdown menu had an upwards arrow as it can be seen here (i am not talking about the carret). Now using bootstrap 3 or latest git this arrow doesn\'t exi

Answer 1

The CSS that Alexander Mistakidis provided is correct. Which is to say, it creates the arrow atop the dropdown menu in Bootstrap. In order to position it correctly in a responsive view (@user2993108), you can change the left attribute for each of the class selectors (.dropdown-menu:before,.dropdown-menu:after) at different media queries or breakpoints.

For example...

@media (max-width: 400px) {

.dropdown-menu:before {
  position: absolute;
  top: -7px;
  left: 30px; /* change for positioning */
  ...
}

.dropdown-menu:after {
  position: absolute;
  top: -6px;
  left: 31px; /* change for positioning */
  ...
}

}

@media (max-width: 767px) and (min-width: 401px) {

.dropdown-menu:before {
  position: absolute;
  top: -7px;
  left: 38px; /* change for positioning */
  ...
}

.dropdown-menu:after {
  position: absolute;
  top: -6px;
  left: 39px; /* change for positioning */
  ...
}

}

and so on...