Bootstrap 3 Arrow on Dropdown Menu

bootstrap 3 arrow on dropdown menu

You need to add :after and :before css rules to your dropdown-menu. These rules are taken from Bootstrap 2, and are what draw the triangle above the dropdown.

JSFiddle DEMO

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

.dropdown-menu:after {
  position: absolute;
  top: -6px;
  left: 10px;
  display: inline-block;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #ffffff;
  border-left: 6px solid transparent;
  content: '';
}

Confused how? See here for an animation that explains css triangles

Twitter Bootstrap 3 - Add Arrow on Dropdown Menu for Desktop Only

you could put your :before and :after inside of a media query with the device width that you wish to be shown only

demo

@media screen and (min-width:750px) {
    .dropdown-menu:after {
        position: absolute;
        top: -16px;
        left: 24%;
        display: inline-block;
        border-right: 11px solid transparent;
        border-bottom: 11px solid #7ed1e3;
        border-left: 11px solid transparent;
        content:'';
    }
    .dropdown-menu:before {
        position: absolute;
        top: -17px;
        left: 25%;
        display: inline-block;
        border-right: 12px solid transparent;
        border-bottom: 12px solid #ccc;
        border-left: 12px solid transparent;
        border-bottom-color: rgba(0, 0, 0, 0.2);
        content:'';
    }
}

Put a arrow on the dropdown-menu in bootstrap CSS

I hope this example will be helpful for you

*,

*:before,

*:after {

  box-sizing: border-box;

}

.example {

  position: relative;

  background: rgb(200, 30, 50);

  width: 300px;

  padding:10px;

}

.triangle {

  display: inline-block;

  vertical-align: middle; position: absolute;

  right: 0;

  top: 0;

}

.arrow-down {

  width: 60px;

  height: 30px;

  border-top: solid 30px rgb(255, 255, 255);

  border-left: solid 30px transparent;

  border-right: solid 30px transparent;

}

<div class="example">

  lorem..

  <div class="triangle arrow-down"></div>

</div>

How to remove the arrow generated in the dropmenu Bootstrap 3.3.7

You can remove the <span class="caret"></span> or, via CSS, you could just hide it like this:

.dropdown-toggle .caret {

        display:none;

    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Latest compiled and minified CSS -->

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->

<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<nav class="navbar navbar-default">

     <div class="container-fluid">

        <div class="navbar-header">

     <button type="button" id="sidebarCollapse" class="btn btn-info navbar-btn">

        <i class="glyphicon glyphicon-align-left"></i>

            <span></span>

     </button>

     </div>

       <ul class="nav navbar-nav navbar-right">

           <li class="dropdown">

            <a href="#" class="dropdown-toggle" data-toggle="dropdown" >Menu<span class="caret"></span></a>

               <ul class="dropdown-menu">

                 <li><a href="#">a</a></li>

                 <li><a href="#">b</a></li>

                 <li><a href="#">c</a></li>

               </ul>

           </li>

        </ul>

     </div>

 </nav>

Bootstrap 3 select move the dropdown arrow to the left and change the color of its block

.styled-select #categories {

  background: transparent;

  width: 268px;

  padding: 5px 5px 5px 30px;

  font-size: 16px;

  line-height: 1;

  border: 0;

  border-radius: 0;

  height: 34px;

  -webkit-appearance: none;

}

.styled-select {

  width: 240px;

  height: 34px;

  overflow: hidden;

  background: url(http://cdn.bavotasan.com/wp-content/uploads/2011/05/down_arrow_select.jpg)  no-repeat left #ddd;

  border: 1px solid #ccc;

}

<div class="styled-select">

  <select id="categories" class="form-control" ng-model="type" ng-change="typeChange()">

    <option value="silent">Show: Silent</option>

    <option value="live">Show: Live</option>

    <option value="buy it now">Show: Buy it now</option>

    <option value="pledge">Show: Pledge</option>

    <option value="sold">Show: Sold</option>

    <option value="winning">Show: Winning</option>

    <option value="losing">Show: Losing</option>

    <option value="favourites">Show: Favourites</option>

    <option value="current">Show: Current Bid Amount</option>

    <option value="" selected>Show: All</option>

  </select>

</div>

Bootstrap menu dropdown not showing dropdown arrow on load

Add aria-expanded="false" to

<a href="#pageSubmenu" data-toggle="collapse">Files</a>

So it will be

<a href="#pageSubmenu" data-toggle="collapse" aria-expanded="false">Files</a>

This will maintain your current css

bootstrap select option dropdown down arrow not showing

Hi i trying to reproduce this issue with your sample code.

But i not faced any specified arrow missing issue in the result.

.form-control {

display: block;

width: 100%;

height: 34px;

padding: 6px 12px;

font-size: 14px;

line-height: 1.42857143;

color: #555;

background-color: #fff;

background-image: none;

border: 1px solid #ccc;

border-radius: 4px;

-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);

box-shadow: inset 0 1px 1px rgba(0,0,0,.075);

-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;

-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;

transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;}

<select class="form-control" onchange="location = this.value;">

            <option>Select a Generic Name</option>

            <option value="1">Title 1</option>

            <option value="2">Title 2</option>

 </select>

---

Related Topics