Is there a way to ensure that when displaying information boxes with Bootstrap, the inputs do not get misplaced or shuffled to the wrong location

I have been working on a form that needs to display an alert:

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

When clicking the button next to the input control, an alert should appear. Although the alert is showing correctly, the input controls are shifting to the wrong position afterwards:

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

The desired outcome is as follows:

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

Is there a way to prevent the shuffling of input controls from left to right? It's important that the order of input controls remains the same even when resizing to smaller screen sizes.

This is what I've attempted so far in the code:

function toggleInfo(ele) {
  if (ele.style.display === "none") {
    ele.style.display = "block";
  } else {
    ele.style.display = "none";
  }
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="col-md-6">
  <div class="form-group">
    <label>One</label>
    <div class="input-group">
      <input type="text" class="form-control" />
      <div class="input-group-btn">
        <button type="button" class="btn btn-default" onclick="toggleInfo(foo_id)">
          -
        </button>
      </div>
    </div>
  </div>
  <div class="alert alert-info" style="display: none;" id="foo_id">
    <strong>Info: </strong> Message.
  </div>
</div>

<div class="col-md-6">
  <div class="form-group">
    <label>Two</label>
    <div class="input-group">
      <input type="text" class="form-control" />
      <div class="input-group-btn">
        <button type="button" class="btn btn-default">
          -
        </button>
      </div>
    </div>
  </div>
</div>

<div class="col-md-6">
  <div class="form-group">
    <label>Three</label>
    <div class="input-group">
      <input type="text" class="form-control" />
      <div class="input-group-btn">
        <button type="button" class="btn btn-default">
          -
        </button>
      </div>
    </div>
  </div>
</div>

<div class="col-md-6">
  <div class="form-group">
    <label>Four</label>
    <div class="input-group">
      <input type="text" class="form-control" />
      <div class="input-group-btn">
        <button type="button" class="btn btn-default">
          -
        </button>
      </div>
    </div>
  </div>
</div>

<div class="col-md-6">
  <div class="form-group">
    <label>Five</label>
    <div class="input-group">
      <input type="text" class="form-control" />
      <div class="input-group-btn">
        <button type="button" class="btn btn-default">
          -
        </button>
      </div>
    </div>
  </div>
</div>

I attempted wrapping every two col-md-6 elements in a <div> to see if they would stay together, but it didn't work:

function toggleInfo(ele) {
  if (ele.style.display === "none") {
    ele.style.display = "block";
  } else {
    ele.style.display = "none";
  }
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<div><!-- Not working -->
  <div class="col-md-6">
    <div class="form-group">
      <label>One</label>
      <div class="input-group">
        <input type="text" class="form-control" />
        <div class="input-group-btn">
          <button type="button" class="btn btn-default" onclick="toggleInfo(foo_id)">
            -
          </button>
        </div>
      </div>
    </div>
    <div class="alert alert-info" style="display: none;" id="foo_id">
      <strong>Info: </strong> Message.
    </div>
  </div>

  <div class="col-md-6">
    <div class="form-group">
      <label>Two</label>
      <div class="input-group">
        <input type="text" class="form-control" />
        <div class="input-group-btn">
          <button type="button" class="btn btn-default">
            -
          </button>
        </div>
      </div>
    </div>
  </div>
</div><!-- End of change I tried -->

<div class="col-md-6">
  <div class="form-group">
    <label>Three</label>
    <div class="input-group">
      <input type="text" class="form-control" />
      <div class="input-group-btn">
        <button type="button" class="btn btn-default">
          -
        </button>
      </div>
    </div>
  </div>
</div>

<div class="col-md-6">
  <div class="form-group">
    <label>Four</label>
    <div class="input-group">
      <input type="text" class="form-control" />
      <div class="input-group-btn">
        <button type="button" class="btn btn-default">
          -
        </button>
      </div>
    </div>
  </div>
</div>

<div class="col-md-6">
  <div class="form-group">
    <label>Five</label>
    <div class="input-group">
      <input type="text" class="form-control" />
      <div class="input-group-btn">
        <button type="button" class="btn btn-default">
          -
        </button>
      </div>
    </div>
  </div>
</div>

Any suggestions on how to resolve this issue?

htmlcsstwitter-bootstrap-3

Answer №1

You must include the row class and update your DOM check snippet.

function toggleInfo(ele) {
  if (ele.style.display === "none") {
    ele.style.display = "block";
  } else {
    ele.style.display = "none";
  }
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<div class="row">
  <!-- Not working -->
  <div class="col-md-6">
    <div class="form-group">
      <label>One</label>
      <div class="input-group">
        <input type="text" class="form-control" />
        <div class="input-group-btn">
          <button type="button" class="btn btn-default" onclick="toggleInfo(foo_id)">
            -
          </button>
        </div>
      </div>
    </div>
    <div class="alert alert-info" style="display: none;" id="foo_id">
      <strong>Info: </strong> Message.
    </div>
  </div>

  <div class="col-md-6">
    <div class="form-group">
      <label>Two</label>
      <div class="input-group">
        <input type="text" class="form-control" />
        <div class="input-group-btn">
          <button type="button" class="btn btn-default">
            -
          </button>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- End of change I tried -->
<div class="row">
<div class="col-md-6">
  <div class="form-group">
    <label>Three</label>
    <div class="input-group">
      <input type="text" class="form-control" />
      <div class="input-group-btn">
        <button type="button" class="btn btn-default">
          -
        </button>
      </div>
    </div>
  </div>
</div>

<div class="col-md-6">
  <div class="form-group">
    <label>Four</label>
    <div class="input-group">
      <input type="text" class="form-control" />
      <div class="input-group-btn">
        <button type="button" class="btn btn-default">
          -
        </button>
      </div>
    </div>
  </div>
</div>
</div>
<div class="row">
<div class="col-md-6">
  <div class="form-group">
    <label>Five</label>
    <div class="input-group">
      <input type="text" class="form-control" />
      <div class="input-group-btn">
        <button type="button" class="btn btn-default">
          -
        </button>
      </div>
    </div>
  </div>
</div>
</div>

Answer №2

To properly structure your content, ensure that you enclose two divs with a col-md-6 class inside a row like this:

<div class="row">
<div class="col-md-6">
    <div class="form-group">
        <label>One</label>
        <div class="input-group">
        <input type="text" class="form-control" />
        <div class="input-group-btn">
            <button type="button" class="btn btn-default" onclick="toggleInfo(foo_id)">
            -
            </button>
        </div>
        </div>
    </div>
    <div class="alert alert-info" style="display: none;" id="foo_id">
        <strong>Info: </strong> Message.
    </div>
</div>
<div class="col-md-6">
    <div class="form-group">
        <label>Two</label>
        <div class="input-group">
        <input type="text" class="form-control" />
        <div class="input-group-btn">
            <button type="button" class="btn btn-default">
            -
            </button>
        </div>
        </div>
    </div>
</div>

Answer №3

Make sure to nest your child <div class="col-md-6" /> within a parent container like 

<div class="container-fluid"><div class="row" /></div></div>

The crucial element is the nested 

<div class="row"> /*child col */</div>

Check out the code snippet below for reference:

<div class="container-fluid">
    <div class="row">
      <div class="col-md-6">
        <div class="form-group">
          <label>One</label>
          <div class="input-group">
            <input type="text" class="form-control" />
            <div class="input-group-btn">
              <button type="button" class="btn btn-default" onclick="toggleInfo(foo_id)">
              -
            </button>
            </div>
          </div>
        </div>
        <div class="alert alert-info" style="display: none;" id="foo_id">
          <strong>Info: </strong> Message.
        </div>
      </div>

  <div class="col-md-6">
    <div class="form-group">
      <label>Two</label>
      <div class="input-group">
        <input type="text" class="form-control" />
        <div class="input-group-btn">
          <button type="button" class="btn btn-default">
          -
        </button>
        </div>
      </div>
    </div>
  </div>
</div>

For more details, visit: https://codepen.io/kenneth-bolico/pen/oNvmdRo

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 embed a section of another website within an iframe and seamlessly guide a user to complete a purchase using a shopping cart?

Seeking advice on how to improve the functionality of my website. Currently, the domain I'm focusing on serves as a landing page, redirecting users to another site for purchases. I've built a separate website for this domain in order to establis ...

htmlcssiframecart

Clickable links and compliant W3C coding

Recently, I have encountered errors in the W3C validator due to the presence of "name" attributes in some <a> tags in my document. The validator flagged these attributes as obsolete. I am curious to know when and why this happened? Additionally, I n ...

htmlcssw3c

Searching for a specific value within a list that has been fetched from a database using AngularJs can be achieved by simply clicking on the search button

Seeking assistance on a search functionality issue. I am able to filter search results from a list retrieved from the database and displayed on an HTML page, but facing difficulty in getting complete search results from the controller. When clicking the se ...

javascripthtmlangularjs

What could be causing my function to fail after pressing the button?

I am new to coding in HTML and JS and attempted to create a button that combines two strings into one when clicked. Can someone please review my code and point out where I may have made an error? <!DOCTYPE html> <html> <body> ...

javascripthtml

What techniques can be used to ensure an element remains visible within the viewport

I am currently working with an HTML element that is displayed when a button is clicked, similar to a popup. My goal is to determine if the element is within the browser's viewport and then position it accordingly inside the viewport. Is there a proper ...

javascripthtmlcss

Is the Pure CSS hide/show technique using radio buttons causing a challenge with parent and descendant elements?

Exploring a CSS Show/Hide functionality using radio buttons is my current challenge. The snippet below demonstrates how smoothly it works. .refusal, .acceptance { display: none; } input#refusal:checked~.refusal { display: block; } input#acceptanc ...

htmlcsscss-selectorsshow-hide

Unusual sidebar scrolling issues experienced in Firefox

Currently, I am in the process of developing an app with a scrolling sidebar. However, there seems to be some unexpected behavior when using Firefox: the content within the sidebar disappears partially below the top of the div if the mouse is positioned lo ...

css

Transform your standard HTML buttons into a collective of radio buttons

Looking for a way to make some ordinary buttons function as radio buttons without adding another library to the project. Any suggestions on how this can be achieved using just HTML and JavaScript/jQuery? Appreciate any help, thank you. ...

javascriptjqueryhtml

Using jQuery with AJAX to transfer data and store it within PHP

Hello! I am looking for assistance in sending or retrieving data from a form using jQuery and AJAX to transfer the data to a PHP page for database storage. Any guidance on how to achieve this using jQuery and AJAX would be greatly appreciated. Thank you! ...

phpjqueryhtmlajax

What is the best way to restrict the border to just one element?

I've configured my navigation bar using a list with li elements. To give it a rounded appearance, I applied a border-radius to the background. Now, I'm looking to remove the border-left specifically from the home element. Below are the code snipp ...

htmlcss

Using jQuery to set the background-image on the body's after pseudo-element with CSS

I am currently utilizing body:after for setting the page wallpaper. body:after { background-image: url('assets/img/wallpapers/<?php echo $getWallpaperFile; ?>'); } CSS content: ' '; display: block; position: absolute; left: ...

javascriptjquerycss

The back to top feature is malfunctioning when navigating to a new page

I've been working with jQuery Mobile to create some pages and wanted to add a "back to top" element. It's been functioning well, but I've encountered an issue. When I navigate from one page, let's say #sport, back to #restaurants after ...

jqueryhtmlajaxjquery-mobilescrolltop

HTML div feedback container with directional pointer

I've been working on creating a comment box with an arrow using CSS, but I'm facing a particular challenge. My comment box has a white background, and in order to make it stand out, I need to add a border. However, I'm struggling with addin ...

csshtml

if there is an error in a JavaScript statement

<!DOCTYPE html> <html> <head> </head> <body> <hr> <div> <div id="myPosition"> </div> </div> <hr> <!--Storing the gun array --> <div id ...

javascripthtml

What is the best way to eliminate the pause in my slideshow?

After spending a few hours working on this project, I've almost completed it. However, I'm facing an issue with the slideshow functionality. It seems to pause after cycling through all the images. Any suggestions on why this might be happening? ...

jquerycss

Is there a way to handle specific email format designs with PHP?

When trying to send an email with specific shipping information and tracking numbers, the formatting appears strange. Here is the desired format: Dear xyz , Per your request, this email is to no ...

htmlcssphp

Transferring data from a React file to a plain HTML page

What is the best way to transfer information from a React app to a static HTML file? For instance, if I collect data through a form in a React app.js file, how can I then send that data to a basic HTML file? ...

javascripthtmlreactjs

Can Javascript be used to open a new window, send POST parameters to it, and pass the request as application/json?

I have a browser client application built with JavaScript that manages a large amount of state data. Sometimes, this data needs to be organized into a structured object and sent to a new window for further processing. Currently, I am using a solution wher ...

javascripthtmljsonforms

PHP - display the modified page with the updates applied

I currently have an HTML page where users can input information and submit a form to change database information. Typically, the submit button calls a PHP file on the server to process the data. However, I am looking for a way for this PHP file to return t ...

phphtml

JS Issue with Generating Content

Introduction( kind of :) ) Starting with the process of generating 5 coffee beans for each cup of coffee. The coffee class includes a strength attribute, and my goal is to visually distinguish the coffee beans which have a strength greater than the select ...

javascripthtmlcsslistclass