Removing inline elements from a Bootstrap dropdown can be achieved by customizing the dropdown

I have a query regarding the use of dropdowns in Bootstrap. When I inspect the element after applying dropdown bootstrap, I notice that some properties are added inline:

position: absolute;
inset: auto auto 0px 0px;
margin: 0px;
transform: translate(0px, -40px);

How can I remove these properties? I want the element to be centered in relation to my button, rather than aligning to the right or left. Is there a way to achieve this using absolute positioning with top and left coordinates instead of inset? I have provided a Bootstrap example below:

.dropup {
  margin-top: 8rem;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1b7974746f686f697a6b5b2e352a3528">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f7959898838483859687b7c2d9c6d9c4">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropup
  </button>
  <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="navbarDarkDropdownMenuLink">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>

EDIT: I am aiming for the following layout: https://i.sstatic.net/48D37.png

Thank you in advance for your response.

cssbootstrap-5

Answer №1

UPDATED

To achieve this, you can customize the left and right values on the dropdown-menu element.

For instance

.dropup {
  margin-top: 8rem;
  margin-left: 8rem;
}

.dropdown-menu {
  right: auto !important;
  left: -50% !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0a6865657e797e786b7a4a3f243b2439">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5b3934342f282f293a2b1b6e756a7568">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropup
  </button>
  <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="navbarDarkDropdownMenuLink">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>

OLD ANSWER

All the inline CSS attributes are within the dropdown-menu class, allowing you to easily override them using the !important declaration.

The !important rule in CSS is used to give more priority to a property/value than usual. By using the !important rule, you can override ALL previous styling rules for that specific property on the element!

For example

.dropdown-menu {
  inset: auto !important;
}

However, exercise caution when using !important as it may lead to CSS conflicts if you attempt to style the same class with the same attribute elsewhere

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

Display the button exclusively on responsive mobile views

I'm looking to enhance my website by adding a call support button with a responsive design feature. The goal is to display the button exclusively in mobile view and replace it with text in other views. Encountering challenges in toggling the visibili ...

htmlcssresponsive

What is the best way to place a transparent navbar on top of a hero image while also adding a functional button to the hero image?

My navigation bar is set to be transparent on top of my hero image, but the buttons on the hero image are not clickable. The nav-bar has a z-index of 1, while my hero image, text, and button have a z-index of -1. This setup causes the button to be unclick ...

htmlcssnavbaroverlayz-index

I am experiencing an issue with mydaterangepicker and primeng where it is not displaying properly in the table header. Can anyone assist me with this

I am attempting to integrate mydaterangepicker () with primeng turbotable (since primeng calendar does not meet the requirements), but I am having trouble with its display. Could you please assist me with some CSS code or suggest an alternative solution? ...

cssangulartypescriptprimeng

Ways to arrange buttons vertically so they are perfectly aligned beneath one another

I'm trying to align a set of buttons, each containing an information icon, vertically under each other. The current alignment can be seen in image_1 below. Can someone please provide me with guidance on how to achieve this using CSS and HTML? I was t ...

htmlcss

Change the size of a custom cursor on click using React

I have customized the cursor on my react app, but I want to make it animate when the user clicks. Perhaps by decreasing its size or some other effect. The cursor is within a component that I've included in my Index.js file. I am unsure how to create a ...

cssreactjscss-selectorsmouse-cursorcustom-cursor

Vertical Alignment of Navigation Bar in Bootstrap 4

I am trying to align the center of my navigation bar using the "Cover" Bootstrap 4 template. Please find the current code provided below. <div class="cover-container d-flex h-100 p-3 mx-auto flex-column"> <header class="masthead mb-auto"> ...

htmlcssbootstrap-4navbarcenter

Chrome failing to recalculate the width of an element as required

When attempting to size an element's width based on its height, I discovered what seemed like a clever solution using the transparent img trick: http://jsfiddle.net/6yc8a2yj/ The pink div displays correctly at a 1:2 ratio, but it fails to resize whe ...

htmlcssgoogle-chrome

Printing Multiple Pages Using JavaScript and Cascading Style Sheets

Encountering difficulties displaying page numbers when printing multiple multipage reports Here is the provided HTML Format : <style type="text/css> body { counter-reset: report 1 page 0; } td.footer:after { counter-increment: page; content ...

javascriptjqueryhtmlcss

What could be causing the extra space at the top of my div element?

My goal is to accomplish the following: However, there appears to be an unnecessary gap above the Social icons div. You can view the live page at This is my current markup:- <header> <img src="images/home-layout_02.jpg" alt="Salem Al Hajri Logo ...

csshtml

What could be the reason for the empty space between the upper and middle cuts?

I am working on these two web pages: http://slacklog.heroku.com/ http://slacklog.heroku.com/signup/date As you can see, there is a gap between the top and middle images as well as the bottom and middle images on both pages. Below is my HTML code: <d ...

htmlcss

The data table appears to be malfunctioning when the table collapses

Having trouble with the data table when adding a collapse tr. Removing the collapse tr fixes the data table issue. Any help on how to resolve this would be appreciated. $('.tableToggleUl').parent('td').css('padding','0 ...

jqueryhtmlcsstwitter-bootstrapdatatable

Creating a compact Swiper slider: reducing image size without sacrificing full window coverage!

Utilizing Swiper to craft a slider that occupies the entire window, with a slight margin for a bar-- no issues there. (https://i.sstatic.net/qcGBA.jpg) However, the image I placed in for the slide () appears to be excessively enlarged. Is there a way to ...

javascripthtmlcsssliderswiper.js

Ensure that the spinner div is horizontally centered within the side menu, even if a scroll

On my web page, I have a spinner component that can be added to different parts of the page as needed. The spinner is always centered according to its parent, which is in relative position, while the spinner itself is absolute. However, the issue arises wh ...

htmlcss

What is the best way to showcase top-rated posts from my feed of posts?

I have a basic PHP script that allows users to post without logging in. Once they submit their posts, the posts are displayed below in a feed similar to Facebook's news feed. I'm now looking to extract the three most liked posts and display them ...

javascriptphphtmlcssmysql

How can I modify cell padding using a media query for a specific screen resolution?

In the desktop view, which is larger than 480px, I need a specific <td> to have a left-padding of 9px. However, once the resolution goes below 480px, this left-padding should increase to 18px. At the moment, my padding definition is specified within ...

cssemailresponsive-designmedia-querieshtml-email

Jquery problems impacting every element rather than only one

I'm currently experimenting with a small project where I have multiple div elements containing an image, h1 tag, and p tag all sharing the same class name. My goal is to add CSS effects that make the h1 tag and p tag slide into view and become visible ...

jquerycss

Ensure the Next/Image component fits neatly inside a div without distorting its aspect ratio, and keep the

I've been attempting to style a NextJS image in a way that it has rounded corners, expands to fit its container div (which is blue in the image), and maintains its aspect ratio (only known at runtime). However, what I currently have is not working as ...

cssreactjsnext.jstailwind-csscss-position

Prevent Border Around Images within a Child DIV

Currently, I am in the process of designing a Tumblr theme and facing the challenge of making my pages visually appealing. One particular issue that is causing me trouble is my desire to have images on individual pages bordered in green with a maximum wid ...

htmlcss

The vertical tab is not appearing correctly within the modal across various browsers

While attempting to showcase a vertical tab inside a Bootstrap 4 Modal, I've encountered an issue where the same modal appears differently in Google Chrome versus Firefox browsers. Here is the code I am utilizing: <!-- Latest compiled and minif ...

cssbootstrap-4bootstrap-modal

How can you center a div at the top of another div?

I am working with a nested div structure and trying to center the inner content of one div within another. Is it possible to achieve this using CSS? <div id="outer"> bla, bla....... <div id="inner"> <p>Test</p> </div> ...

csshtml