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:

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:

The desired outcome is as follows:

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

How can I duplicate or extract all the formatting applied to a specific text selection in Ckeditor?

I am currently utilizing CKEditor version 3.6 within my Asp.net MVC 3 Application. One of my tasks involves creating a Paint format option similar to Google Docs. I am looking to integrate this feature into CKEditor. Is there a way in CKEditor to transfe ...

javascriptasp.netcssasp.net-mvcckeditor

Injecting CSS styles into a webpage using a Chrome extension before the page has completely loaded to achieve instant customization

As a newcomer to creating Chrome (or other browser) extensions, I am working on developing one that applies custom CSS rules to specific page elements. Overall, it seems to be functioning as intended, but with some minor issues. One issue I have encounter ...

javascripthtmlcssbrowsergoogle-chrome-extension

Is there a way to switch between showing and hiding all images rather than just hiding them one by one?

Is there a way I can modify my code to create a button that toggles between hiding and showing all images (under the user_upload class), instead of just hiding them? function hidei(id) { $('.user_upload').toggle(); Any suggestions would be grea ...

javascriptjqueryhtmlcsshide

The footers on each page are not consistent

I have noticed that two pages utilizing the same CSS are displaying differently. Check them out here: 128.48.204.195:3000 128.48.204.195:3000/formats If you look closely, you'll see that below the footer, the /formats page appears to have no extra s ...

htmlcsslayout

What is the best way to enlarge a thumbnail using CSS?

Is there a way to resize an image without distortion? I am struggling with resizing a 70px thumbnail image to 200px X 165px while maintaining the aspect ratio. Currently, when I set the width to 200px and height to 165px, it stretches the image. Below is ...

htmlimagecss

What seems to be the issue with my code for Javascript Math functions?

Welcome to the number game slider! If you roll above 50, you will get double the amount bet. Use the slider to choose your desired betting amount. Issue 1: After a win, the score does not update correctly. Instead of showing increments of 5, it displays s ...

javascripthtml

Adjust the space between spans by utilizing the margin

There are two spans (although there could be many more) on this web page that I need to adjust the distance between. I tried using the margin-bottom attribute, but it doesn't seem to have any effect. The spans remain in their original positions, which ...

cssxhtmllayoutmarginhtml

Creating a Jquery slider animation: step-by-step guide

I tried implementing a code example in jQuery, but I am struggling with achieving smooth transitions in my slides. The changes are happening too abruptly for my taste. How can I create animations that occur during the transition, rather than after it? f ...

jquerycss

Expanding an element to cover all columns in a grid with automatically generated columns

I am working on a CSS grid layout with automatic columns and 2 rows. All elements are normally placed in the first row except for one special element that should span both rows while filling all available column space. My current code looks like this: ...

csscss-grid

CSS to resolve HTML alignment problems

I am new to HTML and CSS, trying to practice formulating a few things but my efforts are proving futile. Below is the code and images for your reference. I would appreciate your opinion. .container { display: block; width: 200px; height: 120px; } ...

htmlcss

What steps should I follow to create a basic file upload page on my server?

Recently, I've been on a quest to create a straightforward file upload page that allows me to easily send files to my server. The concept is for the site to have a feature where I can simply upload a file and have it stored in a specific folder on the ...

html

An animation in CSS where an element moves off the screen to the right in absolute position and then returns from the

I am currently working on a website featuring moving clouds traveling across the screen from left to right. Although I have successfully implemented the animation for the clouds, there is one specific issue that has me stuck. My goal is to display some of ...

cssanimation

Is it possible to redirect my PDF File to my PHP homepage?

Hi there, I've been looking for a solution to my issue. I have been using TCPDF-master to create a PDF report. However, after generating the PDF file and printing it out, I am unsure of how to redirect back to my transaction page. My current setup inv ...

phphtmlpdfmysqlitcpdf

What is the best way to conceal a CSS div through PHP if the div is empty?

I need some help refining my previous question to ensure clarity. Is there a straightforward method for hiding a div when it doesn't contain any information, without causing confusion for the client? This specific div receives information from Jooml ...

phpcssjoomlajoomla-template

Decoding JSON with HTML in c#

While serializing an object into JSON that contains HTML, I encountered a unique issue. Below is the structure of my class: [Serializable] public class ProductImportModel { public string ProductName { get; set; } public string ShortDescription { get; ...

c#htmljsonentity-frameworkserialization

Automatically align a Div to the right within an ngFor directive in an Angular 6 application

<div class="row"> <div class="col-lg-4 col-xs-6" *ngFor="let client of clients;index as i"> <!-- small box --> <div class="small-box bg-dashboard-box" > <div class="inner"> <div class="text-black"> ...

htmlcssangulartwitter-bootstrap

Discover the steps for integrating an object into a Ext.grid.Panel using Sencha Ext Js

Currently, I am utilizing Sencha Ext Js 4 and have integrated an Ext.grid.Panel into my project. I am interested in adding another element inside the header, such as a textbox. Is this achievable? {filterable: true, header: 'Unique' /*Here i w ...

javascripthtmlextjsextjs4

Use PHP to highlight the row that has been selected in an HTML table

I am currently working on a project where I have styled multiple HTML tables on my website using alternating gray and white bands. Now, my goal is to highlight the selected row in a darker shade of gray. I have experimented with various solutions, and the ...

javascriptphpjqueryhtmlcss

Turn off the custom CSS section in the WordPress Customizer for WordPress themes

Looking for assistance in locking or disabling the Appearance -> Customizer -> Additional CSS area on Wp-admin. I have referred to this codex: https://codex.wordpress.org/Theme_Customization_API. However, I couldn't find any hook or function to disab ...

phpcsswordpresswordpress-themingwp-admin

issue arising where the table's border is not displaying

I'm confused about why the border of the first tbody tr's td is not visible. https://i.stack.imgur.com/Fwlv7.png I can't see any reason why the border is not showing up. Here's what I've figured out: If the natural height of th ...

csshtml-tableborder