compressed vertical alignment bootstrap row

I am currently working with a code that displays articles within col-md-6 divs in a single row. Each article varies in height, and the visual aim is to create two columns of articles with similar total height.

<div class="row">
    <!-- FOR ARTICLE IN ARTICLES -->
        <div class="col-md-6">
            <article>
               <!-- content with variable height -->
            </article>
        </div>
    <!-- ENDFOR -->
</div>

However, I am facing an issue where there is a white vertical gap between the first and third divs, as shown in the snippet below. I am wondering if it is possible to have the third div appear directly below the first without this vertical gap?

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="row">
    <div class="col-xs-6">
        <article style="background: yellow; height: 200px;">
           FIRST
        </article>
    </div>
    <div class="col-xs-6">
        <article style="background: red; height: 300px;">
           SECOND
        </article>
    </div>
    <div class="col-xs-6">
        <article style="background: green; height: 350px;">
           THIRD
        </article>
    </div>
    <div class="col-xs-6">
        <article style="background: gray; height: 200px;">
           FOURTH
        </article>
    </div>
   </div>

htmlcsstwitter-bootstrap

Answer №1

To solve this issue, one possible solution would be to utilize the masonry.js script. Alternatively, for a simpler approach, you could consider restructuring the HTML code. You can refer to an example provided at https://jsfiddle.net/kvb5hb6f/12/

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="row">
  <div class="col-xs-6">
    <div class="col-xs-12">
      <article style="background: yellow; height: 200px;">
        FIRST
      </article>
    </div>
    <div class="col-xs-12">
      <article style="background: green; height: 350px;">
        THIRD
      </article>
    </div>

  </div>
  <div class="col-xs-6">
    <div class="col-xs-12">
      <article style="background: red; height: 300px;">
        SECOND
      </article>
    </div>

    <div class="col-xs-12">
      <article style="background: gray; height: 200px;">
        FOURTH
      </article>
    </div>
  </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 best techniques for resizing a Text Field with media queries?

The contact form is responsive and functioning correctly for the textarea field, but there are issues with the input type=text fields on smaller screens. I attempted to address this by incorporating media queries. Below is my code: <!doctype html> ...

htmlcssmedia-queriesresponsive

flexbox: Two vertical icons tightly aligned without any space

Hey everyone, I've been working on this layout: https://i.sstatic.net/4Aye0.png Here's what I tried so far: Resetting padding and margin in the <a href> and in the <img src...> HTML container <div> <div className="pe ...

htmlcssreactjsflexbox

Issue with Firefox flexbox space-between causing item to overflow container

I encountered an issue with my simple component where items inside a flex container, specifically suffixes, are displayed outside the box in Firefox only. Even though I am using space-between in the flex item, the item extends beyond the boundaries of the ...

htmlcssfirefoxflexbox

Issue with body element displacement when utilizing Bootstrap 5.2 toast component

While utilizing a Bootstrap 5 toast, I noticed that it causes the entire body to shift down. I suspect that there may be an issue with how I am handling relative and absolute positioning attributes, but I am uncertain. This is my first time using Stack Ove ...

javascriptphpcssbootstrap-5

Issues with jQuery show and hide functionality are not performing as expected

A dazzling animation has been created, fading in and out gracefully. With two buttons at hand $('.point li') to reveal distinct contents $("#"+classVal+" .table-cell") Nevertheless, upon clicking $('.point li'), I aspire for its conte ...

javascriptjquerycssfadeinfadeout

Input automatically establishes default values

Something strange is happening with my HTML form. When I view it on a browser, default values are appearing in the text and password inputs that I did not set. The text input shows "creator" and the password input shows "*****". This only occurs when I set ...

htmlajax

Insert a div element into the JavaScript file

I have a JavaScript code snippet that needs to be inserted after the "Artwork" section. Here is the code: <div class="image-upload"> <label for="files"> <img src="ohtupload.jpg"> </label> </di ...

javascripthtml

What is the best way to zip two arrays of different lengths so that they can be looped through in a Django

Two arrays are at my disposal: First array: ['Tan','Goh','Tio'] Second array: [['Honda','Toyota','Proton'],['Toyota'],['Proton','Lambo']] Is there a way to merge ...

pythonarraysdjangohtml

An overflow occurs due to the grid column gap

After testing CSS display: grid, I noticed that the grid-column-gap: 10px; property is causing the parent container to break. This makes the green area in my code smaller than the grid area itself. It seems like box-sizing: border-box; doesn't have a ...

htmlcsscss-grid

Tips for parsing URLs to handle page navigation on a single-page website with AJAX when users click the back button

I am currently working on a project for the website . This particular website utilizes ajax and .htaccess to update a single index.php page. However, I seem to be facing an issue with the back button functionality. When users click on different top header ...

javascriptphpjqueryhtmlajax

Creating two columns using React and Material-UI Grid while utilizing just one map function for iteration

I am facing a challenge with Material-UI Grid. I want to display the information from my map function in two columns instead of one. I tried adding another Grid item sm={6} and using the same map function, which resulted in two columns but with identical i ...

cssreactjsdictionarymaterial-uigrid

"Experience the power of Angular.js through seamless animations created by blending the capabilities

I want to smoothly fade out the old view and fade in the new view. The challenge is that the new content must be positioned absolutely until the old one fades out. I also want to set a specific top position and height for the new content, but when I try to ...

javascriptcssangularjsanimationcss-transitions

Enhance the size of the arrow in React Material-UI tooltip

Is there a way to make the tooltip arrow bigger in Material UI v4? I came across a workaround for the react-tooltip library that involves using the border-width css property. Any suggestions for achieving a similar result with MUI tooltips? ...

cssreactjsmaterial-uitooltip

Struggling to replicate Bootstrap's col-md-6 with Tailwind CSS in React?

How can I make my box/form appear in the center of the screen with its width filling half or all of the screen? I've attempted using the w-full class on different elements but haven't been successful in adjusting the width. I am working with rea ...

cssreactjstailwind-css

Tips for validating multiple inputs of the same type with identical names in JavaScript

I have limited experience with Javascript and am facing an issue with a HTML form that contains multiple input types with the same names occurring more than once. My goal is to validate the form before inserting the data into the database. I have managed t ...

phpjavascripthtmlformsvalidation

Investigate the CSS display property of an element using JavaScript

Can JavaScript be used to determine if an element's CSS display == block or none? ...

javascriptcss

Getting URL parameters dynamically without reloading the page

Here's a particular issue I'm encountering: I've implemented the following function to fetch the GET Parameters from a URL. $(document).ready(function() { function getParam(variable) { var query = window.location.search.sub ...

javascriptjqueryhtmlurl

Use the color specified within the string

Recently, we have been revamping an outdated product using VueJs. The original application utilized Spring Web Flow, where all the text editing information was stored in a string. After some research, I discovered that adding white-space: pre-line; as a ...

htmlcssvue.js

Utilized JavaScript and CSS class to create a toggleable button

I am attempting to implement a toggle script on a button by using a CSS class. Issue: When I click on button2, it automatically selects button3, which is incorrect. Only one button should be active at a time upon clicking. function togbtn9() { $("#b ...

javascripthtmljquerycssbootstrap-4

Creating cross-browser gradients using CSS (potentially with the help of Compass)

Looking for a CSS gradient solution that is compatible with all major browsers, including IE7+? Preferably without the need to write extensive code or use custom image files? Compass's gradient mixin doesn't support Internet Explorer, so any alt ...

cssbackgroundcross-browsergradientcompass-sass