Is there a way to display the dropdown menus in a horizontal orientation rather than the traditional vertical layout?

I am currently in the process of learning how to build a website with HTML5, CSS, Bootstrap, and JavaScript. I would like to know how to arrange these buttons horizontally instead of vertically. My goal is to have them displayed centrally, beneath Quick Buy, with appropriate spacing between each button. https://i.sstatic.net/BSOVG.png

Below are some snippets from my code:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f5979a9a818681879485b5c1dbc0dbc6">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

<!-- jQuery and JS bundle w/ Popper.js -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="781a17170c0b0c0a1908384c564d564b">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

<main class = container>
  <form action="" method="">
      <div class="container mt-5">
          <h3 class="text-center">Quick Buy</h3>
          <br>
          <div class="form-group">
              <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  Select Movie
              </button>
              <div class="dropdown-menu">
                  <a class="dropdown-item" href="#">Disney's Mulan</a>
                  <a class="dropdown-item" href="#">Tenet</a>
                  <a class="dropdown-item" href="#">Pinocchio</a>
              </div>
          </div>
          <div class="form-group">
              <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  Select Cinema
              </button>
              <div class="dropdown-menu">
                  <a class="dropdown-item" href="#">Yellow Dhoby</a>
                  <a class="dropdown-item" href="#">Yellow Vivo City</a>
                  <a class="dropdown-item" href="#">Yellow Bedok</a>
              </div>
          </div>
          <div class="form-group">
              <button class="btn btn-warning" type="submit">Book Now</button>
          </div>
      </div>
  </form>
</main>

javascripthtmlcssbootstrap-4

Answer №1

Wrap the li elements in a ul list with the class name list-inline as shown below

<ul class="dropdown-menu">
                <ul class='list-inline'>
                    <li><a href="#" id="">1</a>
                    </li>
                    <li><a href="#" id="">2</a>
                    </li>
                    <li><a href="#" id="">3</a>
                    </li>
                    <li><a href="#" id="">4</a>
                    </li>
                    <li><a href="#" id="">5</a>
                    </li>
                </ul>
</ul>

This arrangement will display the dropdown menu items horizontally. You can modify Bootstrap's default style by overriding it like this

.dropdown-menu{
min-width: 200px;
}

If the changes affect other elements, you can use an id selector to override specifically for that element. Add id="list1" to the div you wish to turn into a dropdown.

#list1.dropdown-menu{
min-width: 200px;
}

See the comparison in this JSFiddle

Answer №2

Make sure to include the d-inline class within the form-group div and add text-center to the container div.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="16747979626562647766562238233825">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

<!-- jQuery and JS bundle w/ Popper.js -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="67050808131413150617275349524954">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

<main class = container>
  <form action="" method="">
      <div class="container mt-5 text-center">
          <h3 class="text-center">Quick Buy</h3>
          <br>
          <div class="form-group d-inline">
              <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  Select Movie
              </button>
              <div class="dropdown-menu">
                  <a class="dropdown-item" href="#">Disney's Mulan</a>
                  <a class="dropdown-item" href="#">Tenet</a>
                  <a class="dropdown-item" href="#">Pinocchio</a>
              </div>
          </div>
          <div class="form-group d-inline">
              <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  Select Cinema
              </button>
              <div class="dropdown-menu">
                  <a class="dropdown-item" href="#">Yellow Dhoby</a>
                  <a class="dropdown-item" href="#">Yellow Vivo City</a>
                  <a class="dropdown-item" href="#">Yellow Bedok</a>
              </div>
          </div>
          <div class="form-group d-inline">
              <button class="btn btn-warning" type="submit">Book Now</button>
          </div>
      </div>
  </form>
</main>

Answer №3

Update the form-group div by adding the style style="display:inline".

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ee8c81819a9d9a9c8f9eaedac0dbc0dd">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

<!-- jQuery and JS bundle w/ Popper.js -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e2808d8d969196908392a2d6ccd7ccd1">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

<main class = container>
  <form action="" method="">
      <div class="container mt-5">
          <h3 class="text-center">Quick Buy</h3>
          <br>
          <div class="form-group" style="display:inline">
              <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  Select Movie
              </button>
              <div class="dropdown-menu">
                  <a class="dropdown-item" href="#">Disney's Mulan</a>
                  <a class="dropdown-item" href="#">Tenet</a>
                  <a class="dropdown-item" href="#">Pinocchio</a>
              </div>
          </div>
          <div class="form-group" style="display:inline">
              <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  Select Cinema
              </button>
              <div class="dropdown-menu">
                  <a class="dropdown-item" href="#">Yellow Dhoby</a>
                  <a class="dropdown-item" href="#">Yellow Vivo City</a>
                  <a class="dropdown-item" href="#">Yellow Bedok</a>
              </div>
          </div>
          <div class="form-group" style="display:inline">
              <button class="btn btn-warning" type="submit">Book Now</button>
          </div>
      </div>
  </form>
</main>

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

Capture the HTML code from the current page and store it in a variable using the post method

My goal is to capture and pass the current HTML code of a page using the method POST. I have implemented the following code: var html_document = document.documentElement.innerHTML; document.body.innerHTML += '<form id="myform" action="myurl.php" ...

javascriptjquery

Tips for perfectly aligning all elements in a row within a card design

Hi there, I'm trying to figure out how to align the content of this card in a single row instead of stacked on top of each other. Here's the code snippet: <div class="container"> <form onSubmit={submitHandler}> ...

cssreactjsmaterial-ui

Adding extra space between a tooltip popup and an element in Twitter Bootstrap

I have been looking for a way to increase the space between my tooltips and the triggering element in Bootstrap. Usually, the tooltip appears right next to the element, but I want to create more distance between them. Is there a way to achieve this using ...

javascriptjquerycsstwitter-bootstrap

Update the jQuery script tag with new content - rewrite everything

I am facing an issue with jquery. I need to change the link to src only when "document.write" is present. Below is my code: myscript.js document.write("TEST ABCD"); test.html <html> <body> <button id="example">click me</button&g ...

javascriptjqueryhtml

utilize regular JavaScript to manage Vue.js events beyond the component's scope

There is a VueJs component embedded in a regular web page. Whenever the component triggers an event, I need the regular web page to react accordingly. Is this achievable? The Sites.vue component is a single file element placed within the content of the re ...

javascriptvue.jsvuejs2

CSS and HTML elements drifting gracefully from the right to the left

Can someone help me change the floating direction in this example? It's currently set to float from bottom to top, but I want it to float right and left instead. I've been adjusting the numbers in the CSS code provided below, but I'm not ac ...

htmlcss

The Cross-Origin Resource Sharing request using the PUT method has been denied due to restrictions set by the

I am currently using CORS requests to communicate between my client and server located on different domains. I have configured my Apache HTTP server to use SSL in the following manner: // Utilizing AJAX withCredentials=true (sending cookies, allowing SSL ...

javascriptajaxapacherequestcors

Determine the presence of an element within a setInterval function while iterating through a for

I'm facing a challenge in validating if each element has been populated before generating a gauge. The gauge value comes from another API and requires waiting for the value to be available. Having the validation check within the For Loop doesn't ...

javascriptjquerysetinterval

Obtain the YouTube video identifier from a YouTube embedded link

Is there a way to extract just the YouTube ID from a given URL? https://www.youtube.com/embed/cqyziA30whE?controls=1&showinfo=0&rel=0&autoplay=0&loop=0 $(".youtube").click(function () { console.log(this.href.replace(new RegExp("em ...

javascriptjqueryhtmlregex

What is the process for retrieving information from my Google Analytics account to incorporate into my website?

Imagine being the proud owner of Your website is equipped with a Google Analytics script that diligently gathers data about your valuable visitors. Now, you have a desire to set up a page views counter. How can you extract data from your own account? ...

javascriptpythongoogle-apigoogle-analytics-api

Using multiple instances of the Summernote Wysiwyg editor on a single page with identical placeholders

I have been using summernote successfully in my application, but I have encountered a minor issue where I have 2 editors on one page. The placeholder in the second editor seems to be inheriting the placeholder of the first editor. Is there a simple solut ...

jqueryhtmlbootstrap-4editorsummernote

The AngularJS price slider may exceed its range if the ng-model is null or below the minimum value

I currently have an rz-slider featured on my webpage that is utilized for gathering the price of a product from the user. In addition to the slider, there are two input fields present which are designated for storing the minimum and maximum values. The ng- ...

javascripthtmlangularjsinputslider

Troubleshooting Vue.js dynamic image path loading issues

Struggling to dynamically load images in a single file component, I keep encountering an error stating that the module cannot be found. It seems like I'm attempting something similar to what was discussed in this post on Stack Overflow, but I can&apos ...

javascriptwebpackvue.jsvuejs2

Vertical centering issue with div specifically in Safari

I am facing an issue with centering a nested div containing a UL within another div. Despite trying various methods to achieve vertical alignment, I am unable to get it to work properly. PARENT .splash { background: url(../img/splash.jpg); backgro ...

htmlcss

How to Extract Information from a Table Enclosed in a Div Using HTML Parsing?

I'm new to HTML parsing and scraping, looking for some guidance. I want to specify the URL of a page (http://www.epgpweb.com/guild/us/Caelestrasz/Crimson/) to grab data from. Specifically, I'm interested in extracting the table with class=listing ...

jqueryhtmljsonparsingscreen-scraping

Express.js encountering issues with INSERT INTO query functionality

I am encountering difficulties when attempting to insert data into a MySQL database. The select queries are functioning properly, leading me to believe that I may have overlooked something in either the Express code or my HTML. The page where I am executin ...

javascriptmysqlnode.jsexpress

Load Vue 3 components dynamically using a string-based approach

Exploring ways to dynamically load components based on a string input. Here is an attempt at achieving this: <component v-for="component in components" :is="eval(component)" /> However, this approach does not yield the desired r ...

javascriptvue.jsvuejs3

Saving solely the content of an HTML list element in a JavaScript array, excluding the image source

One issue I am facing is with an unordered list in HTML which contains items like <ul id="sortable"> <li class="ui-state-default"><img src="images/john.jpg">John</li> <li class="ui-state-default"><img src="images/lisa.jpg ...

javascriptjqueryhtmlarraystext

Concealing data by index within a THREE.Points object in three.js

I've encountered an issue with a collection of points in an object (created using THREE.Points). An example of this can be seen at https://threejs.org/examples/?q=points#webgl_interactive_points. My goal is to hide a specific point when it is clicked ...

javascriptthree.jsvisibilitypoint

Chrome Canary's behavior with CSS border-radius on tiny objects

Is it possible to achieve CSS border-radius on really small objects in Chrome Canary? This experiment with a 3px high line and a 2px border radius, when zoomed in at 600%, doesn't show much difference: It works perfectly fine in regular Google Chrom ...

cssgoogle-chrome