I'm puzzled as to why my bootstrap dropdown menu is expanding to fill the entire width of the webpage despite its supposed small size

I recently created a drop-down menu and an input form using the code below:

  <div class="container-fluid">
    <div class="dropdown">
          <button class="btn btn-info dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
            2
            <span class="caret"></span>
          </button>
          <ul class="dropdown-menu dropdown-info" aria-labelledby="dropdownMenu1">
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
          </ul>
        </div>
        <input type="text" name="" value="">
</div>

The CSS styling I used is as follows:

body {
  background-color: #b6e6bd;
  line-height: 1.6;
}

/* Containers */
.container-fluid {
  padding: 1% 20%;
  margin: auto;
  text-align: center;
}

After implementing this, I noticed that the drop-down menu was stretching across the entire width of the webpage and the empty input box was displaying on the same line. I didn't apply any specific styles to the buttons. Can someone please assist me in getting them to appear on the same line?

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

Answer №1

Because dropdown is styled as a div element, which is a block level element. Check out some examples here

To properly position the elements, you can utilize either grid or btn-group

Alternatively, you can create a custom layout using flexbox:

<div class="group">
  <div class="cell">Dropdown</div>
  <div class="cell">Input</div>
</div>
<style>
  .group {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -ms-align-items: center;
    align-items: center;
  }
</style>

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

Tips for changing the color of hyperlink text without underlining it on hover

I have a menu set up on my website that currently underlines when hovered over. However, I would like it to change color instead, which is the default style for my Wordpress theme. The title, "BOLI STYLUS," changes color exactly as I want it to. Below is ...

What could be causing scrollTo to function in my ClickListener but not in AfterViewInit?

I was pondering about why the code snippet below is functioning properly: scroll(){ window.scrollTo(0, this.ypos); // executes without any issues } And in my html.component: <button (click)="scroll()">Scroll</button> but the cod ...

Core-pages with polymer core have no set height limit

I am embarking on my first project using Polymer. I have implemented core-pages to facilitate navigation between different pages. However, I am facing an issue where the pages are not displaying with a white background-color as intended in the css. You ca ...

Making changes to an AngularJS property updates the value of an HTML attribute

One of my pages, base.html, contains the following code: <html lang="en" data-ng-app="MyApp" data-ng-controller="MyController"> <body style="background-color: [[ BackgroundPrimaryColor ]]"> . . . {{ block ...

Positioning a span to be below an input field

Below is the code for a Blazor component that includes a textbox which can be edited with the click of a button. @if (_editing) { <div class="floatingbox position-relative"> ...

Develop a dynamic animation using gradient and opacity properties

I'm still getting the hang of HTML, JavaScript, and CSS but I recently made some changes to someone else's code to animate a gradient. The original code used background: rgb, but I switched it to background: rgba. It seems to be working fine, but ...

How can I make a row div taller?

Looking at the livelink and code provided below, I have successfully created a responsive grid layout. The last adjustment that needs to be made is to change some of the squares from square shape to rectangular. The top two squares in the second column an ...

Troubleshooting issue with jQuery animate not correctly scrolling

I am experiencing an issue with my jQuery code that is supposed to scroll a smaller container element within a larger container element when a button is clicked. Despite testing with an alert and verifying that the code is working, the scrolling functional ...

Finding the data type based on the button clicked with javascript: A beginner's guide

I am trying to work with a PHP function that generates dynamically created divisions. Each of these divisions contains a different data type and a button. How can I extract the data type of a division when the user clicks on the submit button using JavaScr ...

Retrieve the width of an element once the browser has finalized its dimensions

I am facing an issue with centering a pop-up box perfectly within the window using CSS properties. The code for the pop-up box styling is as follows: #pop_up { position: fixed; display: inline-block; border: 2px solid green; box-shadow: 0p ...

Switch Between More and Less Text - Implement Smooth Transition on Shopify Using Javascript

I recently implemented a More/Less toggle button using resources from this website. The functionality is there, but I now want to add a smooth transition effect. When the user clicks on "read more," I would like the hidden content to gradually appear, and ...

Troubleshooting HTML/JavaScript with JSP and JSTL: iPhone only displaying the first option in select dropdown, rather than the selected option

My HTML includes a <select> element: <select id="mySelect"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> ...

What is the best way to create a modal message box using AngularJS?

Here is some code that I need help with: <body> <div> xxx </div> <div id="error" ng-show="er.msg"> <div style="color: white; background-color: purple; height: 2rem; display: flex; align-items: ...

What is the best way to create titles with a background?

My goal is to have a title overlay an image with specific width and the text displayed in blocks. To better illustrate, here's an example: I prefer to achieve this effect using CSS; however, I am open to utilizing Javascript if needed. ...

Masonry style attempted for posts but did not produce desired outcome

I've been experimenting with different methods to achieve a masonry style layout for my posts. So far, using float:left seems to work almost perfectly, but occasionally there are gaps between the posts. I'm on the lookout for a solid solution to ...

Place the item at the center

My question may be simple, but I'm struggling to find the solution. I have a slider with an image in the middle and want to display some text alongside it like this: https://i.sstatic.net/v2Rck.jpg However, I can't seem to get the text to align ...

"Exploring the Power of Internal Hyperlinks in HTML

As I embark on my first website building journey, I am faced with a dilemma regarding internal links. While everything runs smoothly locally, none of the internal links seem to work once the site is live. Take for instance this internal link: <a href =& ...

Incorporating search suggestions into a div with vue 3 and boostrap: a step-by

I am currently experimenting with building a compact search box that offers suggestions using the vue 3 boostrap library. I am aiming to have the suggestions box float on top of the following div without pushing it down. Despite trying to manipulate the z- ...

unable to toggle collapse functionality of bootstrap 3 navbar

My navbar was recently modified, but now the toggle button is not responding when clicked. Here is the code I am using. Can someone help me find the mistake? CODE: <body> <div class="navbar-wrapper"> <div class="container"> ...

Ways to place a background image without using the background-position attribute

On the menu of this page (blog.prco.com), I have added a background image for the hover effect on the elements. However, when hovering, the dot seems to move towards the final position from its origin point. My question is, how can I center the image belo ...