How to remove arrow in dropdown in Bootstrap ?

25 Jun, 2019
Dropdowns are one of the important components that are an integral part of any web application. Bootstrap provides its own interactive version of this component. Bootstrap dropdowns are toggled by clicking, not hovering as it was an intentional design decision. To use Dropdowns in a web project, include Popper.js into the project.
Every Bootstrap dropdown button or link has an ::after selector in CSS. ::after selector is often used to insert some text after the content of the element. In this case, the content is a dropdown arrow. To remove it, just make the content go ‘none’.
Syntax:
.my-dropdown-toggle::after {
    content: none;
}

One can use this feature to create navigation menus in top navbars. Here’s the complete example showing how to do it.Example 1:
<!DOCTYPE html><html>  <head>    <meta charset="utf-8">    <meta name="viewport"           content="width=device-width, initial-scale=1, shrink-to-fit=no">      <link rel="stylesheet"          href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />      <title>Remove Dropdown Arrow</title>      <style>        .dropdown-toggle::after {            content: none;        }    </style></head>  <body>      <div class="container">        <div class="dropdown">            <button class="btn btn-secondary dropdown-toggle"                    type="button"                    id="dropdownMenuButton"                     data-toggle="dropdown"                     aria-haspopup="true"                    aria-expanded="false">                Dropdown button            </button>                        <div class="dropdown-menu"                  aria-labelledby="dropdownMenuButton">                <a class="dropdown-item" href="#">                  Action              </a>                <a class="dropdown-item" href="#">                  Another action              </a>                <a class="dropdown-item" href="#">                  Something else here              </a>            </div>        </div>    </div>      <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js">  </script>    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"> </script>    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js">  </script></body>  </html>
Output:
Example 2: Remove arrow in dropdown with some changes in class name.
<!DOCTYPE html><html>  <head>    <meta charset="utf-8">    <meta name="viewport"           content="width=device-width, initial-scale=1, shrink-to-fit=no">      <link rel="stylesheet"           href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />      <title>Remove Dropdown Arrow</title>  </head>  <body>      <div class="container">        <div class="dropdown">            <button class="btn btn-secondary"                    type="button"                     id="dropdownMenuButton"                     data-toggle="dropdown"                     aria-haspopup="true"                     aria-expanded="false">                Dropdown button            </button>                        <div class="dropdown-menu"                  aria-labelledby="dropdownMenuButton">                <a class="dropdown-item" href="#">                  Action              </a>                <a class="dropdown-item" href="#">                  Another action              </a>                <a class="dropdown-item" href="#">                  Something else here              </a>            </div>        </div>    </div>      <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js">  </script>    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js">  </script>    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js">  </script></body>  </html>
Output:
Bootstrap-Misc
Picked
Bootstrap
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to Show Images on Click using HTML ?
How to set Bootstrap Timepicker using datetimepicker library ?
How to Use Bootstrap with React?
How to make Bootstrap table with sticky table head?
How to Align modal content box to center of any screen?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Installation of Node.js on Linux
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?