Items in the form are presented one below the other

Despite seeking help previously, I'm still facing an issue with my search filter in Bootstrap 4.

The problem arises from a form element that contains various elements such as input fields and checkboxes. This form is used to filter PDF reports. Previously, when using Bootstrap 3, all the elements were displayed in a line. If there were more than four elements, they would wrap to the next line accordingly.

After switching to Bootstrap 4, the elements are now displayed below each other instead of in a single line. I can't figure out what went wrong in the HTML view, especially since it worked fine in Bootstrap 3. Attached are some images for reference:

How it should look (before Bootstrap 4):

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

Current appearance (with Bootstrap 4 - ISSUE):

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

Here is the relevant HTML code snippet:

<!-- Code snippet not available -->

I have attempted the following solutions so far:

  • Adding a 'row' attribute to the 'form-group' class
  • Removing the 'div' element with the 'input-holder' class
  • Replacing 'form-horizontal' with 'form-inline'

Unfortunately, none of these attempts have resolved the issue. Any suggestions or insights would be greatly appreciated!

htmlcssbootstrap-4

Answer №1

Have you attempted using the form-inline class inside a container DIV?

<div class="container">
  <div class="row">
    <form class="form-inline">
      <div class="form-group col-md-6">
        <div class="input-group">
          <span class="input-group-addon">OD</span><input type="number" class="form-control" /><span class="input-group-addon"></span>                  
         <span class="input-group-addon">DO</span><input type="number" class="form-control" /><span class="input-group-addon"></span>
         </div>
      </div>
    </form>
  </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

What are the steps for implementing JWT authentication with static content hosting?

My website consists of a frontend (built with Vue) and a backend (developed using node). The api relies on jwt authentication, allowing only logged-in users to interact with the backend. The jwt is included in the Authorization: Bearer xxx header. An iss ...

htmlnode.jsauthenticationjwt

What is the key to ensuring the content in your canvas adapts to different screen sizes

Greetings! I wanted to extract the values from this specific meta tag: <meta name="viewport" property="viewport" content="width-device-width, initial-scale=1"> To retrieve content from a meta tag using JavaScript, I used the following code snippet: ...

javascripthtmlcanvastypescript

Repairing div after upward scrolling and maintaining its fixation after refreshing the page

I have encountered two issues with this particular example: One problem is that the fixed_header_bottom should stay fixed beneath the fixed_header_top when scrolling up, causing the fixed_header_middle to gradually disappear as you scroll up, or vice v ...

javascriptjqueryhtmlcss

What is the best way to show an error message on a webpage using jQuery within a PHP environment?

I have a form in HTML that includes a submit button for posting status on a page. When a user clicks the submit button without entering anything into the form field, I want PHP to display a simple error message on the same page saying "This status update s ...

javascriptphpjqueryhtmlcss

showing the chosen item in a Bootstrap dropdown [limited to the first menu option and using the attr() method]

Is there a way to dynamically display the selected menu option using the bootstrap drop down? Initially, I was able to select the first menu option and apply it to the bootstrap drop-down button. However, I encountered an issue where I cannot change the ...

javascriptjquerybootstrap-4

"Troubleshooting: Difficulty with hover function in jqgrid not functioning on colored rows

My JQGrid setup includes the following: <table id="grid"></table> var data = [[48803, "DSK1", "", "02200220", "OPEN"], [48769, "APPR", "", "77733337", "ENTERED"]]; $("#grid").jqGrid({ datatype: "local", height: 250, colNa ...

javascriptjqueryhtmlcssjqgrid

Nested elements not transitioning using CSS

Why is my transition not being applied to the submenu <a> tag? The color change is working fine, but the transition does not occur on hover. When I use the same rules on another element with a different main class, it works perfectly. It seems like t ...

htmlcsscss-transitions

What is causing my nested class to be treated as a sibling rather than a child in HTML code

I have been searching for a clear answer to my query, but haven't found one yet. In my HTML script, I have nested divs structured like this: <ul id="navbar"> <li><a href='#' class='dropdown'>Rules</a> ...

htmlcss

Floating divs failing to clear properly in Internet Explorer

Encountered a persistent bug that only seems to occur in Internet Explorer. I have set up a jsFiddle to showcase the issue. <div class="container" style="width: 802px;"> <div class="block"></div> <div class="block"></div> ...

htmlcsscross-browser

The display message in Javascript after replacing a specific string with a variable

I'm currently working on a task that involves extracting numbers from a text input, specifically the first section after splitting it. To test this functionality, I want to display the result using an alert. The text input provided is expected to be ...

javascriptjqueryhtml

What could have caused this issue to appear when I tried running ng build --prod?

Issue encountered while trying to build the ng2-pdf-viewer module: An error occurred in the webpack loader (from @angular-devkit/build-optimizer) with the message: TypeError: Cannot read property 'kind' of undefined. This error is related to A ...

htmlangulartypescriptconsolepdf-viewer

Deploying an Azure Blob Trigger in TypeScript does not initiate the trigger

After successfully testing my Azure function locally, I deployed it only to find that it fails to trigger when a file is uploaded to the video-temp container. { "bindings": [ { "name": "myBlob", "type&qu ...

javascripthtmltypescriptazureazure-functions

The 404 error page will show the title of the corresponding 404 file

I recently made changes to my site's .htaccess file by inserting the following line: ErrorDocument 404 page-not-found.html Now, when I try to access a nonexistent page like example.com/pagethatdoesntexist, all I see on the screen is "page-not-found ...

htmlwebcustom-error-pages

Guide on sending the unique identifier of an element to the backend following a click event

Currently, I am working on a specific page in my project that lists movies. When you click on a movie, it directs you to a page where you can view all the information about that particular movie. I am utilizing SQL in my database and one of my ideas is to ...

javascriptc#htmlsql

Code working in Chrome but not in Firefox: JavaScript hyperlink issue

Within my Rails project, an HTML file displays the following: <a href='#' id="show_advanced">Show advanced options</a> Upon clicking on the link, JavaScript/JQuery code is executed: jQuery("#show_advanced").click(function() { // ...

javascripthtmlruby-on-rails-3

Display or conceal <ul>'s using JavaScript when the mouse enters or leaves

I'm encountering an issue with a basic JavaScript function. The goal is to toggle the dropdown menu on my website when the mouse hovers over or leaves the menu. The problem arises because my script is triggered by the ul tags within my menu, and I ha ...

javascripthtmlcss

What is the process for building a grid system similar to Bootstrap's 12-column grid using the new CSS Grid Layout?

Is there a way to implement a 12-column grid system similar to Bootstrap using CSS Grid? I am struggling to understand this new technology and would greatly appreciate it if someone could provide a demo. My goal is to create a simple grid structure resem ...

csstwitter-bootstrapgridflexboxcss-grid

Unexpected changes in styles can occur on the page at any moment

I have loaded this CSS: #ue_email_new{ border: 1px solid #000000; } When the page loads, it displays correctly. However, when I click on inspect element (using FF 17) and view the CSS, I notice something strange in the debugger: element { border ...

htmlcss

Simple steps to add a click event listener to every element within a div

I need to assign a click handler to multiple elements and perform different actions based on which one is clicked. To illustrate, I can create an alert displaying the class of the button that was clicked. The elements I am working with have a similar str ...

javascripthtml

Command Internet Explorer 9 to disregard media queries and instead adhere to the minimum width rule

Is there a way to prevent IE9 from recognizing media queries or following min-width? I have created a responsive design for mobile devices using media queries on my website, and they function perfectly in modern browsers. However, some users still use old ...

css