Utilizing Bootstrap for center-aligning a dropdown menu

I am using bootstrap to create a dropdown menu that I want to appear as a small box in the center of the page, similar to this example.

Here is the HTML code I am working with:

<div class="dropdown">
  <button 
  class="btn btn-default dropdown-toggle" 
  type="button" 
  id="dropdownMenu1" 
  data-toggle="dropdown" 
  aria-expanded="true">
    List
    <span class="caret"></span>
  </button>

  <ul class="dropdown-menu" style="right: 0; left: 0;" role="menu" aria-labelledby="dropdownMenu1">
    <li class="text-center" role="presentation"><a role="menuitem" tabindex="-1" href="#">First</a></li>
    <li class="text-center" role="presentation"><a role="menuitem" tabindex="-1" href="#">Second</a></li>
    <li class="text-center" role="presentation"><a role="menuitem" tabindex="-1" href="#">Third</a></li>
  </ul> 
</div>
htmlcsstwitter-bootstrap

Answer №1

Perhaps the issue lies with the conventional style of dropdown menus:

.center {
  text-align: center;
}

.dropdown-menu{
  width: 200px;
  text-align:center !important;
  float: none !important;
  margin: 0 auto !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<div class="container-fluid center">
  <div class="col-md-5">

    <div class="dropdown">
      <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
        List
        <span class="caret"></span>
      </button>

      <ul class="dropdown-menu" style="right: 0; left: 0;" role="menu" aria-labelledby="dropdownMenu1">
        <li class="text-center" role="presentation"><a role="menuitem" tabindex="-1" href="#">First</a>
        </li>
        <li class="text-center" role="presentation"><a role="menuitem" tabindex="-1" href="#">Second</a>
        </li>
        <li class="text-center" role="presentation"><a role="menuitem" tabindex="-1" href="#">Third</a>
        </li>
      </ul>
    </div>
    <div>
    </div>

Answer №2

Have you considered utilizing the code 

<select size="1"><option>...</option></select>
?

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

Adding a click function to a div individually when they share the same class in HTML

My goal is to include 4 unique divs inside a timeline container: This is how I envision the structure: <div id="timeline" > <div class="timeline-bar t-1"></div> <div class="timeline-bar t-2"> ...

javascriptjqueryhtmlcss

Static Header - Halts Animation on Downward Scroll, Resumes when Scrolling Ceases

I've implemented a fixed menu on my website. Everything seems to be working fine, but here's the issue: When I scroll down and the fixed menu starts animating, if I continue scrolling quickly, the animation pauses. It only continues when I stop ...

javascriptjqueryhtmlcss

Click on a new tab to enable printing options for the page

I am looking to enhance the print page functionality on my website. Currently, when the print icon in the footer is clicked, it opens the printer dialog box directly. I would like to change this behavior so that when the Print icon is clicked, the contents ...

javascript.nethtmlcssprinting

A single feature designed to handle various elements

I currently have this HTML code repeated multiple times on my webpage: <form class="new_comment"> <input accept="image/png,image/gif,image/jpeg" id="file" class="file_comment" key=comment_id type="file" name="comment[media]"> <spa ...

javascriptjqueryhtml

I require assistance on how to properly arrange images in a div so that they stack

I'm having an issue with arranging a series of images within a div where they stack on top of each other. The div has a CSS width of 450px, and the top image always matches this width. Subsequent images vary in size and need to be aligned flush right ...

css

Is it possible to send a POST request without clicking the Submit button?

Is there a way to post the Form without using the Submit method? If I were to use JQuery, how would I go about handling the Form input controls? ...

phpjqueryhtmljson

What steps do I need to take in order to arrange my cards into binary groups for PC viewing

Is there a way to display cards as binary groups for PC view? The layout looks fine on phone but the cards are all at the bottom when viewed on a computer. This is how it currently appears: https://i.sstatic.net/XBgJc.jpg I want the card layout to resem ...

htmlcss

Issue with meta viewport on Android devices

Creating a versatile JavaScript dialog class is my current project using JQuery to generate centered div-popups on the screen. So far, implementation across common browsers has been straightforward. The challenge arises when dealing with mobile platforms ...

javascriptandroidhtmlcssviewport

What is the best way to align an image in a particular div based on the current position of the viewport

I want to add a sleek animation while loading content using ajax. My goal is to display an icon while the "Content" div is reloading, but I'm not sure if this can be achieved with just CSS. The icon needs to: Always be horizontally centered within ...

ajaxcssjquery

Using PHP's explode function to convert JSON output into an array

Hello, I received a JSON output from an API which contains information about pet adoption. The data includes details like the adoption process and personality of the animals. {"listings":[{"adoption_fee":"$200","adoption_process":"For cats, please fill ou ...

phphtmljsondecodeexplode

An error has been thrown stating that the function startTimer is not defined, despite the fact that it is clearly defined

const startBtn = document.querySelector('.startBtn'); const pauseBtn = document.querySelector('.pauseBtn'); const ResetBtn = document.querySelector('.resetBtn'); const time = document.querySelector('.time'); let sec ...

javascripthtmlsetinterval

Full page occupied by image, not just a banner separator

I'm having trouble creating a scrolling banner that blurs as you scroll. Whenever I attempt it, the image takes up the entire page background (it's positioned behind all elements but still fills the entire page). I actually want the image to be i ...

javascriptjqueryhtmlcssimage

Building a responsive CardMedia component with React Material UI

I am currently working on creating a gallery using React Material UI (utilizing Card, ...). I am facing some challenges in making the gallery responsive, especially with varying cover sizes: https://i.stack.imgur.com/2n6vf.png Here is the code snippet I ...

cssreactjsflexboxresponsive-designmaterial-ui

Why is the inline-block element in the list displaying on two lines? The text contains a number, but does it affect the layout?

What could be the reason for 'Maroon 5' moving down to a second line? Despite adding extra characters and testing with an integer, the issue persists. <ul id="soundsLike"> <li>Foo Fighters</li> <li>Maroon 5</ ...

css

Transfer your focus to the following control by pressing the Enter key

I came across a project built on Angular 1.x that allows users to move focus to the next control by pressing the Enter key. 'use strict'; app.directive('setTabEnter', function () { var includeTags = ['INPUT', 'SELEC ...

javascripthtmlangulartypescript

Mobile and tablet screen resolutions determine the position of the navigation toggle button

I've been stuck on this issue for days now and would really appreciate some help sorting it out. I'm trying to position the hamburger icon on the right side, a contact picture with a phone number in the middle, and a brand logo on the left. For s ...

htmlcssbootstrap-4navbarhamburger-menu

Tips for preventing a div from overflowing in col-md-12 in Bootstrap 3

Is there a way to maintain the same width for the image and div below? Everything looks good until the window size is between 545px to 575px. The .header width changes only at col-md-12. How can I preserve the aspect ratio? VIEW SCREENSHOT CODEPEN LINK ...

htmlcsstwitter-bootstrap-3

Resizing Images with Bootstrap

While working with twitter bootstrap 2.2.2, I have noticed that the image in the "hero" div resizes correctly when the page loads initially. However, it then unexpectedly expands beyond the div boundaries and gets cut off. You can view the page here: It ...

jqueryhtmltwitter-bootstrap

How can a JQuery function be used with SVG to trigger a second animation immediately after the first animation is finished?

For the handwriting effect animation, I utilized the animation-delay technique by dividing the object wherever it intersected, drawing paths, and converting them into clipping masks. This involved breaking the letter "W" into four parts, creating different ...

htmljquerycsssvgsvg-animate

Inconsistent functionality of HTML5 BrightCove videos on Android devices

Encountered an issue with the Brightcove HTML5 video embedded on my website showing a black screen when clicked to play. The video plays sporadically and only on Android Devices (testing on KitKat only). In instances where it doesn't work, the templa ...

androidhtmlbrightcove