Looking for a simple method to generate a text-only dropdown link in Bootstrap 4 without using a button?

Is there a simple method to create a text-only dropdown link in Bootstrap 4 without using a button?

Or do I have to adjust the padding and buttons using CSS to make the "Delivery" dropdown blend in with the rest of the text?

I've searched online and on Codepen, but all I could find were examples of button dropdown menus.

https://i.sstatic.net/xB2GJ.jpg

<div class="dropdown">
              <button
                class="btn btn-light dropdown-toggle"
                type="button"
                id="dropdownMenuButton"
                data-toggle="dropdown"
                aria-haspopup="true"
                aria-expanded="false"
              >
                Delivery
              </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>
htmlcssbootstrap-4

Answer №1

To achieve this, you can opt for using an anchor tag instead of a button tag as shown below:

          <a
            class=" dropdown-toggle"
            id="dropdownMenuButton"
            data-toggle="dropdown"
            aria-haspopup="true"
            aria-expanded="false"
          >
            Delivery
          </a>
          <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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Restrict the size of the numerical input in AngularJS

<input class="span10" type="number" max="99999" ng-maxLength="5" placeholder="Enter Points" ng-change="myFunc($index)" ng-model="myVar"> This code snippet adjusts the value of form.input.$valid to false if the number entered exceeds 99999 or is long ...

javascriptjqueryhtmlangularjsangularjs-scope

The value of the variable is failing to be included in the Ajax request being sent to the server via jQuery

I'm encountering an issue with my contact form where I can't seem to retrieve the $_POST values via ajax for saving to a text file. It seems like there might be a problem with my javascript code. Check out the jQuery code snippet below: functio ...

phpjqueryhtmlajax

Eliminating null values from arrays

Hello there! I'm currently working on inserting a list of locations into my database. $locations = array(); $locations = $_POST['loc']; $loc = implode(", ", $locations); However, when I insert the array into my database, the empt ...

phphtml

Eliminating Unnecessary Stylesheets in Vite and Vue Website

When working on the Vite-Vue application, I noticed that the styles I implemented for both index.html and Vue components/views are showing up as crossed out in the browser. Additionally, many of the styles I added to the components/views are also being cro ...

cssvue.jsvuejs3vite

Tips for alternating the color of <li> or <tr> elements consecutively

Looking to alternate the background color of li or tr elements consecutively. Please note: A static class will not work as I need to call this in a while loop. The desired output should look like: <li>line1</li> //white background <li> ...

javascriptphpjqueryhtmlcss

The click event triggered by the onclick clone/function may not always activate the click handler

As a newcomer in the JavaScript domain, I am encountering an issue where the first clone created after clicking 'add more' does not trigger my click me function. However, every subsequent clone works perfectly fine with it. What could be causing ...

javascripthtmltypescript

Full comprehension with a width of 100%

Here is an example where .flex2 has 2 children. 1st child - width: 300px 2nd child - width: 100% .b{ height: 50px; } .flex2{ margin-top: 20px; display: flex; .box{ background-color: blue; width: 300px; } .box1{ backgroun ...

css

rectifying file extension hyperlinks

While designing a webpage on my MacBook's local server, I unintentionally omitted the ".css" file extension in the href attribute of a link to my locally stored stylesheet. The mistake went unnoticed until I transferred my files to an externally hoste ...

htmlhostingwebserver

What steps can be taken to update the cart if all products have been removed?

How can I implement a refresh for my cart page every time the product length is 0 without causing unreachable code? It seems like there must be a simple solution to this problem. switch (action.type){ case "REMOVE_PRODUCT": return ...

javascripthtmlreactjsreact-native

Enhancing User Experience with CSS

Is there a way to create a link within a div and change the hover color to indicate it's a link? The challenge is that my div contains both an image and text in separate divs. div { :hover { background-color: light cyan; } Currently, when I hov ...

htmlcss

When closing a Bootstrap modal, the modal overlay does not automatically close along with it

Need assistance with a functionality where new requests can be added and existing requests can be edited using a single component that regenerates with the correct data when needed. Below is the code for the base component: home-component.html <ul c ...

angularbootstrap-4bootstrap-modal

The Alert Component fails to display when the same Error is triggered for the second time

In the midst of developing a Website using Nuxt.js (Vue.js), I've encountered an issue with my custom Alert Component. I designed a contact form on the site to trigger a specialized notification when users input incorrect data or omit required fields ...

javascripthtmlcssvue.jsnuxt.js

"Enhance User Experience with the jQuery/JavaScript Table Pagination

I have searched extensively for a jQuery/JavaScript table pagination solution. While I found some options, they were too complex for my needs. I am looking for a simple jQuery plugin to assist with paginating an HTML table. Datatables is more than what I ...

jqueryhtmljquery-pagination

Is there a way to create a spinning slot machine animation using CSS3 and jQuery?

I'm currently working on a demo application that will randomly choose a venue when a user clicks a button. My goal is to have the selected venues scroll through with a slot machine spinning animation created using CSS3 and jQuery. Initially, I consid ...

jqueryhtmlanimationcss

Creating a scrollable interface for horizontal button navigation

Is there a way to create a horizontal button scrollbar using only HTML and CSS? I want it to look like this: https://i.stack.imgur.com/RWFRt.png After searching online for a solution, I came up with the following code: .myBtnContainer{ display: gri ...

htmlcss

Issue encountered: Compilation error occurred following the update from Angular 11 to Angular 15, stemming from the module build failure within the sass-loader directory

I recently attempted to update angular from version 11 to 15, but encountered an error as shown in the screenshot below ./src/assets/styles.scss - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js): SassError: expected "(". ...

cssangularsassbuildmodule

Is there a way I can create a slight gap between the icon and the text in this area?

After learning Reactjs and JavaScript, I have encountered a problem that I need advice on. In the image provided, the "Sign in" text does not have proper spacing between the icon and the text, unlike the other menu items. https://i.stack.imgur.com/b663b. ...

htmlreactjs

Is there a reason why I can't load all Google charts on one webpage?

I am trying to use the Google Charts API to display various charts on my web page. However, I seem to be encountering an issue where the last chart is not loading correctly. Can someone point out what I might be missing in my code? I would greatly apprecia ...

javascripthtmljavascript-objectsdom-eventsgoogle-visualization

Dynamic class name changes in Angular.js based on JSON object

I am trying to dynamically change the class of an <li> element based on the category value I am getting, but for some reason the class name won't update. Here is the code snippet: <div id="content"> <ul id="container" ng-controller ...

javascriptjqueryhtmlangularjsjson

Php/JavaScript Error: Identifier Not Found

I've double-checked my code multiple times, but it still doesn't seem to be working properly. When the PHP runs, the browser console displays the following error: Uncaught SyntaxError: Unexpected identifier. I'm not sure if this is a si ...

javascriptphpcsshtmlbootstrap-4