What is the best way to create flexible Bootstrap 3 columns with varying heights?

I'm struggling to remove space and create a flex column .col-md-5 with varying heights. Despite trying various solutions found on Google, I still can't get it to function properly. The current outcome is not as expected.

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

Below is the code snippet: 

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="container-fluid">
  <div class="ayaz">
    <div class="col-md-5 col-md-offset-1" style="margin-bottom:10px;">
      // rest of the code here
    </div>
    <div class="col-md-5 " style="margin-bottom:10px;">
      // rest of the code here
    </div>
    <div class="col-md-5 col-md-offset-1" style="margin-bottom:10px;">
      // rest of the code here
    </div>
  </div>
</div>

If anyone has insights or suggestions on how to fix this issue, I would greatly appreciate it. Thank you for your help.

twitter-bootstrapcssflexbox

Answer №1

If you need the assistance of the masonry script, it was initially reliant on jQuery, but now it functions perfectly fine with vanilla JavaScript:

new Masonry( parentSelector, {
  itemSelector: childSelector
});

Simply substitute parentSelector and childSelector with the appropriate selectors.

Answer №2

Here is the complete solution:

If you're in need of a masonry-style grid layout, consider using third-party modules like the one provided by desandro at masonry.desandro.com. Additionally, there are several plugins available for implementing masonry layouts within Bootstrap 3.

Alternatively, you may want to reassess your content structure to minimize any unnecessary blank space.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">


<div class="container-fluid">

  <div class="row">

    <div class="col-6">
        <div class="card">
          some content 1
        </div>
        <div class="card">
          some content 2
        </div>
    </div>

    <div class="col-6">
        <div class="card">
          some content mega huge content
          some content mega huge content
          some content mega huge content
          some content mega huge content
          some content mega huge content
          some content mega huge content
          some content mega huge content
          some content mega huge content
          some content mega huge content
          some content mega huge content
        </div>
        <div class="card">
          some content mega huge content
          some content mega huge content
          some content mega huge content
          some content mega huge content
          some content mega huge content
          some content mega huge content
          some content mega huge content
        </div>
     </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

Ways to Turn Off CSS Vertical Menu Flyout Animation

I'm new to HTML Lists and trying to figure out how to disable the "Hover flyout effect" so that all sub items are listed vertically below the main item while remaining visible. Can someone please help me understand which specific CSS properties can be ...

htmlcss

Align the tops of the tables

I currently have three tables in my HTML code. When all three tables are filled with data (10 rows each), they appear correctly aligned as shown in the first picture. However, if any of the tables do not have the maximum capacity of 10 rows reached, they ...

htmlcsshtml-table

What method can I use to enlarge the carousel component from the flowbit-svelte library?

I have been working on a project that requires a Carousel, and I decided to incorporate the flowbit-svelte carousel into my svelte project. While the carousel is functioning well, I am facing an issue with the component size. It seems to be cutting off my ...

csstailwind-csssvelteresponsivesveltekit

Positioning a secondary div beside a primary div that is centered on the page

As I work on my website, I have a container that encompasses the entire design and is perfectly centered using margin:auto. Now, I am looking to float specific content to the right of this central container in a way that it stays attached to the side reg ...

csshtmlcss-floatcenter

Excessive width of Bootstrap container

Encountering a rather simple issue: the bootstrap container inside my navbar is too wide, causing an unwanted horizontal scrollbar as it expands the body. You can view the problematic page here. The theme used for this site can be found here. What's ...

htmlcsstwitter-bootstrap

Tips for locating direct children of a non-root element using CSS selectors in Selenium

When working with a <table> element, I encountered the need to search for its descendants and direct descendants while avoiding wading through nested tables. The elements I seek lack reasonable IDs, so specific selectors are essential: <html> ...

c#cssselenium

What is the best way to add the current date to a database?

code: <?php session_start(); if(isset($_POST['enq'])) { extract($_POST); $query = mysqli_query($link, "SELECT * FROM enquires2 WHERE email = '".$email. "'"); if(mysqli_num_rows($query) > 0) { echo '<script&g ...

javascriptphpjqueryhtmlcss

What is the best way to display a single instance of a React component that is declared in multiple locations within the app?

Imagine I have 2 main components, A and B. Now, component C needs to be created inside both A and B. How can I guarantee that the same exact instance of C is generated in both places? Essentially, I want them to stay synchronized - any changes made to one ...

javascripthtmlcssreactjscomponents

Tips for showcasing chats with the most recent message highlighted

As I work on my web app using Laravel, I have encountered an issue where I need to scroll down to see the newest messages when there are many conversations. Here is how the chats display on page load I want to focus on displaying the newest message first. ...

javascriptcsslaravel-5bootstrap-4

Ensuring only one group is open at a time in jQuery when a new group is opened

I need assistance in getting this functionality to work properly. My goal is to have only the clicked group open, while closing all others that are currently open. Here's a specific example of what I am trying to achieve: var accordionsMenu = $(&apo ...

jqueryhtmlcss

Tips for using jquery and ajax to upload a file

I am currently attempting to use AJAX to upload a file along with other form data. I am utilizing this bootstrap and jQuery plugin as a guide. However, while I can successfully submit the form without uploading a file, I am encountering some challenges whe ...

javascriptphpjqueryajaxtwitter-bootstrap

Tips for centering the InputLabel in Material UI?

Upon loading the page, I am looking to have the InputLabel appear as shown in the second picture. However, I haven't been able to find any InputLabel props that achieve this. I attempted using the focused prop, but it didn't give me the desired o ...

javascriptcssreactjsmaterial-ui

Adding an image to the right side of a jumbotron component in Bootstrap

Hey there! I'm trying to add an image to the jumbotron component in Bootstrap. I'd like to position it on the right side of the jumbotron. Here's the code I have so far: <section class="jumbotron text-center"> <div class="conta ...

twitter-bootstraptwitter-bootstrap-3bootstrap-4

Having difficulty inserting an image with style="background-image:url(' ')" in Rails from the database

Hi everyone! I am new to both Rails and Stack Overflow, and I would really appreciate it if someone could guide me here. I am currently working on a test site that resembles a personal blog. It's mainly for showcasing one user's portfolio. In t ...

htmlcssruby-on-rails

The vertical-align property in CSS fails to function properly when applied to specific rows or columns within the

Hello, I have been experimenting with table attributes and came across the valign attribute. However, I encountered some cells that were not affected by it. So, I decided to try CSS vertical-align instead. To my surprise, some cells were affected while oth ...

htmlcss

Issue with the alignment of DIV container due to spacing issues

In the screenshot below, there is a DIV container with padding of 15px on the left and right. However, the contents are appearing spaced out downwards for some reason... Other than the left & right padding, no other styling seems to be affecting it. Adjus ...

csshtmlinputspacing

Is it possible to have an iframe set in the background with a specific z-index but without

Currently, I am working on a webpage where I have inserted an iframe in the background because other div elements on the page "interact with it". Even though I have used z-index to make it visible in the background, I am facing issues with controlling it s ...

htmlcssiframez-index

List with Columns for Organization

I am not seeking advice on how to use columns in lists, but rather on aligning the columns on my website. Below is the code I have: <ol class="threecolumns"> <li>Item 1</li> <li>Item 2</li> <li>Item 3< ...

htmlcss

When viewed on a mobile device, the contact information bar should vertically collapse

Here is the code snippet I am working with: <div class="topbarsection"> <ul> <li class="alignleft"> <a href="#">Office Address</a> </li> <li class="aligncenter"> Office Timings ...

htmlcssmobile

What are the tips for aligning this button perfectly on the page, despite being centered in a computer's resolution?

Dealing with Responsive Design Hey there! I'm having an issue with my Bootstrap layout. I managed to center a button, but when I adjust the resolution or make it smaller, the button wraps and shifts to the right. Can anyone help me figure out what we ...

htmlcssbootstrap-5