Rearranging divs in Bootstrap according to the visibility of other divs

My goal is to adjust the position of a div based on the visibility of other divs. When the screen size is reduced, the divs stack up and hiding/showing any div automatically makes the stacked up divs show/hide without leaving any blank space, but this behavior does not occur in normal screen sizes (laptop/desktop).

For an example, you can check out this jsbin

If you uncheck any checkbox, I want a row with only one visible div to resize so that it occupies the hidden div as well.

I am currently using a col-md-6 class for the 2x2 divs on the page.

<div class="col-md-6 column" id="1col"> </div>
javascriptjqueryhtmlcsstwitter-bootstrap

Answer №1

Give this a try: Start by assigning a unique class name to your .row element so that it won't impact other elements, then apply the following CSS rules:

.row{display:flex; justify-content:space-around}
.column{display:inline-flex; height:100%; width:auto;}

Make sure to replace .row with something like .row.myColumns, but in the meantime, you can use this code as is to test in jsbin. I personally didn't create an account there and don't have any plans to sign up just for testing purposes, but I did experiment with your code by organizing the columns into one row, using 2, 3, and eventually all four columns together, and everything functioned flawlessly. So, I encourage you to try it out on your own.

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

Create a custom chrome browser extension designed specifically for sharing posts on

I'm working on creating a basic chrome extension that features an icon. When the icon is clicked, I want the official Twitter window to pop up (similar to what you see here). One common issue with existing extensions is that the Twitter window remains ...

javascriptgoogle-chrometwitter

Looking for a JavaScript regex pattern that matches strings starting with the letter "p" and containing at least

I have recently started learning about JavaScript regular expressions. I attempted the following expression for a string starting with the letter "p" followed by digits: p1749350502 The letter "p" is constant and the remaining digits are variable. Howeve ...

javascriptregex

I require a picture to fill up as much space as possible, regardless of its initial dimensions

As I work on my react-native app, I encounter a challenge regarding the layout. My application consists of a top bar and a bottom bar with an image in between. The image needs to fill up as much space as possible without overlapping the bars. Despite numer ...

cssreact-nativeflexbox

Display or conceal elements based on the screen size using Bootstrap 3 classes

While this may seem straightforward for some, the reality is quite different. I have two images that need to be displayed based on screen size. In my HTML code, I used classes like hidden-md, hidden-sm, and hidden-xs assuming they would only show on larg ...

htmlcsstwitter-bootstrap

Behavior of jQuery resizable when being used on elements can sometimes

A live demonstration showcasing unusual behavior can be found at: If you attempt to resize the window by grabbing the right border and adjusting it horizontally, the vertical alignment goes awry. This issue persists across all open windows accessed throug ...

javascriptjqueryhtmlangularjscss

I'm looking to incorporate a "throbber" into this ajax function. Can you assist me with that?

Essentially, when the function is executed on my page, an image is called to div#imagebox. However, at times the image can be large and may take some time to load, particularly if it hasn't been cached yet. I want to provide the user with a notificati ...

jquerythrobber

utilizing the scss random feature to assign a randomly generated background hue

Despite reading numerous articles on this topic, I am struggling to implement a feature where a random color from a list is applied as the background image every time the page is refreshed. $red: #fc5545; $pink: #FCCCD1; $green: #005E61; $greenLight: #42B ...

csssass

Searching for a method to execute actions prior to the "enter" event in ng-animate, similar to the beforeAddClass function

//trying to replicate the top animation with the enter-leave animation below app.animation('.answer-animation', function(){ return { beforeAddClass: function(element, className, done){ if (className == 'answer') { ...

javascriptangularjsanimation

Updating variable values using buttons in PHP and Javascript

I've implemented a like/unlike button along with a field displaying the number of likes. The code below uses PHP and HTML to echo the variable that represents the total number of likes: PHP-HTML: <span>likes: <?php echo $row['likes&apo ...

javascriptphponclickincrementdecrement

Insert the video link and preview it with live option

Currently working on a form that allows users to input a video URL. The form will be a standard input field where they can enter a URL such as: http://video.google.com/videoplay?docid=1299927595688205543 I want to include a button within the form labeled ...

javascriptjqueryforms

Unable to transmit the error information to a response

Currently, I am in the process of making a POST request with a form-data type body. Within the body, there is specific data that can be found here: https://i.sstatic.net/XvRgJ.png In order to parse the data field (which is stringified JSON) in the body ...

javascriptnode.jsexpress

AngularJS select box setting selected valueIt can be accomplished by manipulating the

I am facing an issue with a selectbox populated with options from the backend. <tr> <td class="col-lg-4">Superkund</td> <td><select class="form-control input-sm2" ng-model="selectedSupercustomer" ng-options="item as item ...

javascriptangularjs

Unusual behavior of PHP echo when inserting into an HTML value attribute

Let's dive right into the problem. I have a database entry that is a string in the column name1 and it looks something like this: COMPANYNAME DIVADAY The key characteristic of this string is that it is mostly a combination of two or more words separ ...

phphtmlsql-server

The Power of JQuery in Dynamically Adding Script Tags and Executing Code

The objective is to dynamically load script tags via ajax, execute the scripts, and display the content within the script tag (an iframe with a video). Here's the scenario: Imagine a page dedicated to videos. Upon clicking on "video-text," the corres ...

javascriptjqueryajaxdrupal

Switch out a static full-page image background for an engaging HTML5 video

Is there a simple method to switch out a full-page image background with a video? video { position: fixed; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -100; transform: translateX(-50%) tr ...

csshtmlhtml5-video

What is the best way to separate one dropdown area from another dropdown area?

I have two dropdown menus where, when an option with the value "other" is clicked, it generates a text area just below the dropdown menu. Both sections are functioning correctly, but I had to create separate parent wrappers for each in order to do so. How ...

javascriptjqueryhtmldynamic

The dynamic routing feature in React fails to function properly after the application is built or deployed

I'm facing an issue with getting a React route to function properly in the build version of my app or when deployed on Render. Here are the routes I have: <Route path="/" element={userID ? <Home /> : <Login />} /> <Route ...

javascriptreactjsexpressreact-router

What are the potential drawbacks of directly modifying the state in ReactJS?

According to the documentation, it is stated that An example provided explains how directly modifying state will not re-render a component: // Incorrect this.state.comment = 'Hello'; Instead, the correct way is to use setState(): // Correct ...

javascriptreactjs

How to manage multiple items within a single MUI/React TextField

Recently diving into the world of JS, React, and MUI, I find myself faced with a challenge involving a MUI TextField that is supposed to handle multiple values. For example: 1*10 5*50 13*250 5*50 1*10 3*33.33 4*25 3*33.33 All on a single line. These ...

javascriptreactjsregexmaterial-ui

The use of $scope.$destroy may resolve memory leak issues, but it can also cause

In my TypeScript AngularJS application, I have a child directive that is dynamically generated. The template and controller are assigned at runtime based on the requirements of the situation, with multiple directives within the template. To display multipl ...

javascriptangularjsangular-directive