Center align Bootstrap 4 dropdown menu

I am attempting to center align my dropdown menu using Bootstrap 4.

Following the given example:

[

This is the result I am achieving:

[

This is the code I have implemented:

<div class="container">
  <div class="row">
    <div class="col-md pl-4 user-dropdown text-center">
      <div class="dropdown btn-group">
        <a class="navbar-brand dropdown-toggle" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fas fa-user"></i></a>
        <ul class="dropdown-menu">
          <li>
            <a href="{{ route('logout') }}" onclick="event.preventDefault(); document.getElementById('frm-logout').submit();">
                                        Logout
                                    </a>
            <form id="frm-logout" action="{{ route('logout') }}" method="POST" style="display: none;">
              {{ csrf_field() }}
            </form>
            <hr>
          </li>
          <li><a href="{{ route('user.profile') }}">My Profile</a></li>
        </ul>
      </div>
    </div>
    <div class="col-md">
      <span><a class="navbar-brand" href="#"><i class="fas fa-shopping-cart"></i></a></span>
    </div>
    <div class="col-md">
      <span><a class="navbar-brand" href="#"><i class="fas fa-heart"></i></a></span>
    </div>
  </div>
</div>
htmlcsstwitter-bootstrapbootstrap-4

Answer №1

Here is the solution:

.user-dropdown .dropdown-menu {
  left: 50% !important;
  transform: translateX(-50%) !important;
  top: 100% !important;
}


.user-dropdown .dropdown-menu {
  left: 50% !important;
  transform: translateX(-50%) !important;
  top: 100% !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-md pl-4 user-dropdown text-center">
      <div class="dropdown btn-group">
        <a class="navbar-brand dropdown-toggle" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fas fa-user"></i></a>
        <ul class="dropdown-menu">
          <li>
            <a href="{{ route('logout') }}" onclick="event.preventDefault(); document.getElementById('frm-logout').submit();">
                                Logout
                            </a>
            <form id="frm-logout" action="{{ route('logout') }}" method="POST" style="display: none;">
              {{ csrf_field() }}
            </form>
            <hr>
          </li>
          <li><a href="{{ route('user.profile') }}">My Profile</a></li>
        </ul>
      </div>
    </div>
    <div class="col-md">
      <span><a class="navbar-brand" href="#"><i class="fas fa-shopping-cart"></i></a></span>
    </div>
    <div class="col-md">
      <span><a class="navbar-brand" href="#"><i class="fas fa-heart"></i></a></span>
    </div>
  </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

Using Twitter Bootstrap Modal for Rails form submissions with AJAX/JSON

I'm encountering a challenge with integrating a Rails form_for form into a Bootstrap modal and updating a table using AJAX. I've attempted to follow the guidance provided at , but without success. I have also explored the suggestions in the resou ...

ajaxjsonruby-on-rails-3twitter-bootstrap

Is there a minimum height restriction for v-select in Vuetify.js?

Looking at the code snippet provided below, I am facing an issue while trying to decrease the height of a v-select element. It seems like there is a minimum limit set for the height, as reducing it beyond height = 40 doesn't have any effect. Is there ...

javascriptcssvue.jsvuejs2vuetify.js

Customizing error messages to display validation errors instead of default text errors in the Django UserCreationForm

I'm encountering an issue with the registration form on my website. The form itself is straightforward, but I'm facing a problem where if a username is already taken or if the two password fields don't match, Django doesn't respond afte ...

pythonhtmlcssdjango

Using jQuery to add the input from a dynamically loaded Ajax select list to a different form prior to submission

Let's simplify the code for this question: I have two HTML forms with IDs of 'header' and 'existing' In the 'existing' form, there is a select element where the options list is loaded dynamically using Ajax based on sea ...

jqueryhtmlajaxformsselect

Utilizing jQuery to dynamically update background colors within an ASP repeater based on the selected value of a dropdown list

On my asp.net web page, I have a repeater that displays a table with various fields in each row. I am trying to make it so that when the value of a dropdown within a repeater row changes, the entire row is highlighted in color. While I have achieved this s ...

javascriptjquerycssasp.netwebforms

Issue with setting a selected option in Bootstrap modal with Select2

I have done extensive research on this issue but still haven't been able to resolve it. I am looking to set a unique value in a select element that is displayed and selected when the user clicks an "Edit Record" button for each table row. The value ...

jqueryformsbootstrap-4jquery-select2

Arranging of the fetch_assoc

As a complete beginner in programming, I am excited to share that I have recently embarked on this journey and had only a few classes so far. Currently, I am working on developing a new website just for fun. It is intended for me and my colleagues at work ...

phphtmlmysqlweb

Using the HTML video tag to apply different background colors based on the individual machines being

My web application includes a video that is set to play against the same background color as the webpage. However, I am experiencing an issue where the video background appears differently on various machines using the same browser. What I would like to ac ...

htmlcssvue.jsbrowserbackground-color

Resolving a CSS Layout Dilemma: How to Overlay Sidebar on Wrappers

I've run into a challenge while attempting to position a sidebar over page wrappers. The issue with absolute positioning arises when the sidebar needs to align with the corner of the blue header. I have contemplated using JavaScript to maintain its cu ...

javascriptjqueryhtmlcssfrontend

Utilizing jQuery for serializing unorganized lists

I have created multiple lists within a list and I need to pass the IDs using jQuery to another PHP file (updateDB.php). I attempted to serialize the list data but was unsuccessful. I'm not certain if I have implemented it correctly, I searched extens ...

javascriptjqueryhtml

Issue with PrimeNG DataTable contextMenu alignment inside TabView

I encountered an issue with displaying a DataTable - contextMenu when it is placed within a TabView. The contextMenu was appearing off-center. However, the DataTable - contextMenu worked perfectly fine when it was not wrapped in a TabView. To address this ...

cssangularprimeng

Modify the chosen dates in the date range picker tool designed for Twitter Bootstrap

I recently started using the date range picker for Twitter Bootstrap, a creation by Dan Grossman, which you can find here. Upon initialization, I realized that setting pre-defined values like startDate and endDate was possible. However, my question is: Is ...

javascriptjquerytwitter-bootstrapdaterangepicker

Problem displaying images in Mean stack app using CSS background-image and Webpack

Currently, I am enhancing my skills by working on my own projects. One of the projects I'm focused on right now is designing a MEAN-stack app that utilizes Webpack. In the past, I encountered an issue where I couldn't display images in my app. Ho ...

htmlcssangularwebpacksass

Understanding Aspect Ratios in CSS for Div Containers and their Components

I am crafting an HTML5 game without the use of canvas and aiming to maintain a 16:9 aspect ratio within my div. Thanks to javascript, achieving this is straightforward and it functions flawlessly. However, the elements inside the div occasionally appear to ...

javascriptcsshtml

Using JQuery and/or Selenium/WebDriver to ascertain the visible color of elements on a webpage

Is there a way to accurately determine the visible color of page elements? When using JQuery, I can retrieve the background-color of an element with the following code: $('#foo').css('background-color'); However, the background-color ...

jqueryhtmlcsscolorsselenium-webdriver

Is there a way to modify my code to restrict users from liking a post multiple times?

I am currently working on a like system and I have made some progress. However, I am struggling to make it so that the likes only increment once. Does anyone have any insights or suggestions on how to achieve this? I have considered using session variables ...

javascriptphphtmljqueryajax

The lifespan of my cookie is limited

I am utilizing the jQuery.min.js from https://github.com/carhartl/jquery-cookie and my cookie code looks like this: $(function() { //hide all divs just for the purpose of this example, //you should have the divs hidden with your css //check ...

javascriptjqueryhtmlcookies

What steps should I take to address these styling challenges?

Recently, I came across some code that uses the hspace attribute which is now considered outdated. In order to create space between elements in a widget, I am looking for a solution that involves adding 10px of space above and between the items using CSS. ...

csshtmlinline

Prevent the page from refreshing when a value is entered

I currently have a table embedded within an HTML form that serves multiple purposes. The first column in the table displays data retrieved from a web server, while the second column allows for modifying the values before submitting them back to the server. ...

javascripthtmlforms

Excessive content - letter "y" disrupts the row layout on mobile devices

I have created a custom CSS class called "custom-class" and applied it to the col div. This column contains dynamic images, so I have added a vertical scrollbar property to handle the overflow. While everything looks fine on a desktop, the layout breaks o ...

htmlcssbootstrap-4