Position the dropdown items of the navbar side by side

I am currently struggling to align my Bootstrap 4 dropdown items side by side as shown below:

https://i.sstatic.net/i3pP0.png

The desired layout involves having Item 1 and Item 2 as dropdown options when hovering over the first Test item.

I attempted to use the CSS property float: left, but it did not produce the desired result.

Currently, the dropdown items are displaying stacked on top of each other like this:

https://i.sstatic.net/gxWzU.png

<div class="collapse navbar-collapse" id="navbarToggler">
        <ul class="navbar-nav ml-auto">
            <li class="nav-item dropdown">
                <a class="nav-link" href="javascript:void(0)" id="NavbarToggler">Welkom</a>
                <div class="dropdown-menu" aria-labelledby="NavbarToggler">
                    <a class="dropdown-item mt-2" href="info">Informatie Stedenband</a>
                    <a class="dropdown-item" href="geschiedenis">Geschiedenis Stedenband</a>
                </div>
            </li>
</div>
htmlcssbootstrap-4

Answer №1

To achieve a horizontal alignment of dropdown items, follow this code snippet:

.dropdown-menu a{
  display:inline;
  padding:5px;
}

Alternatively,

If you prefer a vertical alignment of dropdown items, use the following code:

.dropdown-menu a{
  display:block;
  padding:5px;
}

Answer №2

Employ the classes d-inline-block and w-auto alongside the dropdown-item for optimal styling

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

The iframe HTML code is appearing as normal text within a table

https://i.stack.imgur.com/1MIs5.png There are numerous questions like this on Stack Overflow without answers, which is why I'm posing this question. This particular issue only displays text and not a HTML iframe inside a table td element. <!DOCTYP ...

htmliframe

Sort the images before uploading them

Hey everyone, I'm having an issue with the sortable feature. I am currently using AJAX to temporarily save images and display them without uploading. Now, I would like to be able to sort those images and have a button to save the sorted version. The ...

javascriptjqueryhtmlajax

The vue template is indicating an error related to unused variables according to the eslint rule vue/no

Perhaps this information will come in handy for someone. I am working with a Vue template that contains HTML. <template slot="HEAD_Status" slot-scope="data"> <!-- some html without using of data --> </template> Eslint is showing [v ...

htmlvue.jseslint

I am struggling to make the horizontal scroll and fixed column features work in dataTables. The rendering seems to be inconsistent across different platforms. Can anyone help me figure out what I am doing incorrectly?

I've dedicated countless hours to unraveling this conundrum. I'm in urgent need of creating a table that mirrors the layout displayed on this webpage: https://datatables.net/extensions/fixedcolumns/ The desired functionality involves both verti ...

jquerycsstwitter-bootstrapscrollbardatatables

Generate a menu submenu allowing for interactive toggling and dynamic visualization of expandable/collapsible sections upon clicking, featuring visually

Looking for assistance in creating a dynamic menu with sub-menus that can expand upon clicking. The goal is to have an expandable menu structure where the user can click to expand or collapse certain sections. However, my current code is not functioning co ...

javascriptjqueryhtmlcss

Retrieve the bounding rectangle of a div that has the CSS style `display: contents` using the getBoundingClientRect

My objective is to apply styling and obtain the bounding box of an entire "row" within a CSS grid, including features like highlighting when hovering over it. To achieve the styling aspect, I make use of the display: contents property, so that the styles ...

javascripthtmlcss

Change the CSS dynamically

I'm curious about how to create a similar effect like the one on this page: On the left side, there is a panel that allows for adjusting the template. What I've noticed is that when I change the color, different CSS files are used (blue.css, pur ...

htmlcss

Scrapy spider malfunctioning when trying to crawl the homepage

I'm currently using a scrapy scrawler I wrote to collect data from from scrapy.contrib.spiders import CrawlSpider, Rule from scrapy.contrib.linkextractors.sgml import SgmlLinkExtractor from scrapy.selector import Selector from .. import items clas ...

pythonhtmlweb-scrapingweb-crawlerscrapy

When crafting an XPATH expression, I am able to navigate within the #document element. Within this element, I must specify the path to the HTML body of my web page

I need assistance with my HTML page, can someone please help? Here is the XPath code I am using: (//span[text()='Information']//following::div[contains(@class,'edit-area')])[1]/iframe However, when I run my script, it says that there ...

javascripthtmlseleniumxpathiframe

JavaScript's setAttribute function is not functioning as expected

I have been using the setAttribue method as shown below. It works perfectly for the first instance, but after that, when I try to change the value, it displays an alert without updating with document.getElementById("to").setAttribute("value", selValue); d ...

javascripthtml

Change the border color of a form field in a material design if the user interacts with the

Is there a way to change the border color of a material form field in Angular when it is touched, focused, or active? I attempted to modify the color by overriding material css-class and also tried creating my own css class, but neither method had any ef ...

cssangular-material

Interactive CSS Video Gallery Slideshow

Is there a way to create a slideshow video gallery using CSS? I've looked everywhere but all I find are slideshow image galleries. If anyone has any resources or tips on how to do this, please share! This is the kind of video gallery I'm looking ...

htmlcssslideshowvideo-gallery

Experiencing issues with a malfunctioning Chrome extension? The CaptureVisibleTab feature seems to be failing when using

Whenever I try to use the captureVisibleTab function on a page where I have a div with preserve3d in CSS3, all I see is a blank page. How can I solve this issue? Here is my simple code for capturing the browser screen: chrome.browserAction.onClicked.addL ...

google-chromecssgoogle-chrome-extension

Using the Croppie plugin to crop an image before uploading via jQuery Ajax in PHP

I've successfully implemented a code snippet that allows image cropping using PHP, jQuery, and Ajax with the Croppie plugin. Currently, I'm facing an issue while trying to include additional input values along with the image upload process. I ...

javascriptphpjquerycssajax

How can one utilize JSON.parse directly within an HTML file in a Typescript/Angular environment, or alternatively, how to access JSON fields

Unable to find the answer I was looking for, I have decided to pose this question. In order to prevent duplicates in a map, I had to stringify the map key. However, I now need to extract and style the key's fields in an HTML file. Is there a solution ...

javascripthtmljsonangulartypescript

JavaScript pause until the DOM has been modified

My current situation involves using a JavaScript file to make changes to the DOM of a page by adding a navigation menu. Following this code, there is another function that further modifies the newly added navigation menu. However, I am facing an issue wher ...

javascriptjqueryhtmldom

Struggling with getting the navigation bar to show up in a row instead of stacking

Hey there, I need some help with the layout of my page. Here's the link to the page I'm currently working on: At the moment, the list is showing up vertically instead of horizontally. CSS: li { display:inline; list-style-type:none; ...

htmlcsslistinline

Troubleshooting Problem with Web Forms and Bootstrap Form Design

Currently, I am utilizing a simplified version of the Admin LTE Bootstrap Theme in an ASP.NET Web Forms Project. In this project type, only one form tag can be used per page. The form tag must encapsulate both the Top (Nav) and Bottom (Side Bar Left & Mai ...

cssasp.netformswebforms

Struggling to locate desired href links using BeautifulSoup

I'm currently working on compiling a list of hrefs from the Netflix job portal: . Each job posting on this platform comes with an anchor and a specific class: <a class=css-2y5mtm essqqm81>. To ensure accuracy, here is the complete anchor: <a ...

pythonhtmlbeautifulsoupurllib

Struggling with the alignment of divs in a vertical manner

Looking for a way to align multiple divs inside another div vertically with even spacing between them? They should all start at the top. Currently, my solution has the child-divs positioned at the top-left corner of the parent div (see the first picture): ...

htmlcssreactjs