Issues with Bootstrap Input Group functionality

I am attempting to align multiple form elements in a row, however I am encountering some unusual behavior. My goal is to have the checkbox, label, number input, and select dropdown appear in the same line as shown in this image:

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

Here is the code I have tried:

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b6d4d9d9c2c5c2c4d7c6f68398869887">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<div id="price_selection_page" class="border">
   <form class="mt-3 p-2 d-flex">
      <div class="input-group d-flex w-25">
         <input class="form-check-input me-3" type="checkbox" value="" id="set-mark-up-check">
         <label class="form-check-label" for="set-mark-up-check">Set Markup</label>
      </div>
      <div class="input-group d-flex">
         <div class="input-group-prepend">
            <input class="form-input" type="number" value="" id="mark-up-amount-input">
         </div>
         <select id="mark-up-select" class="custom-select">
            <option value="percentage">% By Percentage</option>
            <option value="amount">% By Amount</option>
         </select>
      </div>
   </form>
</div>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="89ebe6e6fdfafdfbe8f9c9bca7b9a7b8">[email protected]</a>/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>

However, when I view it in the browser, this is the result I get: https://i.sstatic.net/RL0Lz.png As you can see, the checkbox and label are on the same line, but the number input and select dropdown are on separate lines. I am using Bootstrap 5 and would greatly appreciate any assistance. Thank you!

htmlcssbootstrap-4

Answer №1

Utilize the class "d-flex" to align the content in a single row and cut down on unnecessary <div> tags.

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="72101d1d06010600130232475c42-5c43">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<form class="mt-3 p-2 d-flex">
  <div class="input-group d-flex w-25">
    <input class="form-check-input me-3" type="checkbox" value="" id="set-mark-up-check">
    <label class="form-check-label" for="set-mark-up-check">Set Markup</label>
  </div>
  <div class="input-group d-flex">
    <div class="input-group-prepend">
      <input class="form-input" type="number" value="" id="mark-up-amount-input">
    </div>
    <select id="mark-up-select" class="custom-select">
      <option value="percentage">% By Percentage</option>
      <option value="amount">% By Amount</option>
    </select>
  </div>
</form>

Answer №2

Test it out:

<form class="mt-3 p-2">
   <div class="form-row">
      <div class="col">
         <input class="form-check-input" type="checkbox" value="" id="set-mark-up-check">
         <label class="form-check-label" for="set-mark-up-check">Set Markup</label>
      </div>
      <div class="col input-group">
         <div class="input-group-prepend">
            <input class="form-input" type="number" value="" id="mark-up-amount-input">
         </div>
         <select id="mark-up-select" class="custom-select">
            <option value="percentage">% By Percentage</option>
            <option value="amount">% By Amount</option>
         </select>
      </div>
   </div>
</form>

Visit https://getbootstrap.com/docs/4.0/components/forms/ for more details.

Modify

<!doctype html>

<head>
    <!-- Necessary meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="791b16161d0b081a1a3f1a1d193b171c121c1349111f1e56">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
</head>

<body>
    <div class="container">

        <form class="mt-3 p-2">
            <div class="form-row row">
                <div class="col-3">
                    <input class="form-check-input" type="checkbox" value="" id="set-mark-up-check">
                    <label class="form-check-label" for="set-mark-up-check">Set Markup</label>
                </div>
                <div class="col-6">
                    <div class="input-group">
                        <div class="input-group-prepend">
                            <input class="form-input" type="number" value="" id="mark-up-amount-input">
                        </div>
                        <select id="mark-up-select" class="custom-select">
                            <option value="percentage">% By Percentage</option>
                            <option value="amount">% By Amount</option>
                        </select>
                    </div>
                </div>
            </div>
        </form>

    </div>
</body>

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

What is the best way to incorporate parallax scrolling in the center of a webpage?

I am trying to implement a parallax scrolling effect in the middle of my page, but it seems to be causing issues once I reach that section while scrolling. I attempted to use intersection observer, but unfortunately, it did not resolve the problem. const ...

javascripthtmlcssscrollparallax

Changing images dynamically using Javascript when hovering over an element

Looking to create a dynamic image switch effect on hover, where multiple images cycle through when hovered over. Each time the mouse hovers over the image, it should switch to the next in a sequence of 5 images. <img id="switch" src="img1.jpg"> $(& ...

javascriptjqueryhtml

The plugin data containing 'data:application/pdf;base64,JVBERi0xLjQKJ**' was declined for loading. Content security policy cannot be configured

My approach to enforcing content security policy involves using the following code snippet: <meta charset="UTF-8" http-equiv="content-security-policy" content="object-src 'self' data:" /> However, when this i ...

htmlvue.jspdfvuejs3content-security-policy

Issue with Bootstrap 4 navbar z-index not functioning as expected

Hello, I am struggling to place my navbar on top of an image using bootstrap 4. I have set the CSS properties for both elements, but it doesn't seem to be working. Here is the code I am using: <header> <nav class="navbar navbar-toggl ...

csstwitter-bootstrapnavbaroverlapbootstrap-4

Certain content appears oversized on Android devices, yet appears appropriately sized on desktop computers

I am experiencing an issue with a webpage where the text appears normal on desktop but is too big on Android devices. Below is the code snippet causing the problem: <!DOCTYPE html> <html> <head> <title>ra ...

androidhtmlcsstext

When using BeautifulSoup, there may be instances where the table element is not always detected, resulting in a 'NoneType' error being returned on occasion

Hello everyone, I am trying to retrieve accurate daily temperatures from www.wunderground.com and encountering the 'NoneType' error occasionally. For instance, the code below attempts to fetch the temperature data from March 1 to March 5, 2020. S ...

pythonhtmlseleniumbeautifulsoupnonetype

Are HTML attribute names really case-sensitive? A topic filled with conflicting information

After learning that attribute names are case-sensitive, I found conflicting information. A source mentioned that attribute names are indeed case-sensitive. For example, the width attributes in <div> and <DIV> would be considered separate due ...

htmlcss

How to dynamically modify a list box with JavaScript

I have an index.html file with a select tag containing multiple options for a drop-down: <label for="edu">Education</label> <select id="edu" name="edu"> <option value="0">10th</option&g ...

javascriptpythonhtmlmachine-learningflask

Instructions on triggering a pop-up modal from a separate HTML document to the index page

I am trying to open a form in a Modal using a button. However, the Modal is located in a separate .html file. How can I use JavaScript to call the form from that external html file into my index.html file? Currently, I am able to call the Modal within the ...

javascriptphphtmlcssbootstrap-modal

Integrating dual Google Maps onto a single HTML page

I'm facing an issue with implementing two Google maps on a single page where the second map seems to be malfunctioning. Below is the code I am currently using: <style> #map-london { width: 500px; height: 400px; } #map-belgium { wi ...

javascripthtmlcssgoogle-maps

Space between flex content and border increases on hover and focus effects

My code can be found at this link: https://jsfiddle.net/walshgiarrusso/dmp4c5f3/5/ Code Snippet in HTML <body onload="resize(); resizeEnd();"> <div style="margin: 0% 13.85%; width 72.3%; border-bottom:1px solid gray;"><spanstyle="visibilit ...

javascripthtmlcss

Using HTML and CSS to generate an alpha mask on top of an image

I am currently working on a website and I am looking to create an effect where an image is masked by an overlay. The goal is to achieve a "fade out" effect, without any actual animation, but rather make it appear as if the image is gradually fading into th ...

javascripthtmlcssfademasking

Link inserted in between spaces

Working with Eloqua. Any ideas on what might be causing a space to appear in a link? The space doesn't show up during testing, only in the live version. Here is the code snippet: <p style="line-height:18px;"> <font face="calibri, Arial, H ...

htmlcssfontshyperlinkhtml-email

Problem with Pathjs routing

Can anyone help with this routing issue I'm having? Path.map("/(:page_1)(/:page_2)/").to(funct); The route is not matching for: /projects/index2/ It matches /anything, but not /anything/anything If you have any ideas, please share! ...

javascriptjqueryhtmlhtml5-historypath.js

I'm attempting to make the button hover color transparent, but unfortunately, it's not having any effect

Check out the code snippet below. I'm attempting to adjust the button hover color to transparent. The div class is "button_container" while the button class is "btn". I made changes to the color initially, but it doesn't seem to be working. Any a ...

htmlcsswordpresshover

Interactive button visual effect

I have a piece of code that currently plays audio when I click on an image. However, I am looking to modify it so that not only does clicking on the image play the audio, but it also changes the image to another one. Can anyone assist me with this? Here i ...

javascripthtmlimageaudio-player

Need to delete the product page link on WooCommerce?

I am currently working on fixing the one-page checkout process and I need to remove a single product link from a product picture. The goal is to have only the checkout link displayed on this page, specifically within a quickview view. After trying out var ...

phpcsswordpressfunctionwoocommerce

Send form information using AJAX response

I have successfully implemented a feature where I load an iframe into a div with the id of #output using AJAX. This allows me to play videos on my website. jQuery( document ).ready( function( $ ) { $( '.play_next' ).on('click', fun ...

javascriptjqueryhtmlajaxforms

Can theme changes be carried over between different pages using Material UI?

I've encountered an issue with MUI 5.14.1 where I'm getting an error every time I attempt to save themes across pages using localStorage. Any suggestions on how to resolve this problem or recommendations on a different approach would be greatly a ...

javascriptcssmaterial-uimaterial-designthemes

Pagination of AJAX result on the client side using jQuery

My issue revolves around pagination in AJAX. I want to avoid overwhelming my search result page with a long list of returned HTML, so I need to split it into smaller sections. The Ajax code I am currently using is: $.ajax({ url: "getflightlist.php?pa ...

javascriptphpjqueryhtmlajax