Vertical Alignment of Bootstrap Columns

Within the post section of my website, I have 4 columns with varying heights based on their contents using Bootstrap 4 grid system. As shown in the image below https://i.sstatic.net/ZHHqR.png

When I resize the 4th column it rearranges.

https://i.sstatic.net/8Dp52.png

As seen in the image above, the 4th column shifts under number 1 but aligns based on the height of the 3rd column. I want it to stack like the photo below.

https://i.sstatic.net/0JPpE.png

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row pt-3 port-folio-margins pb-5 pr-4 pl-4">
  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 pl-1 pr-1 ">
    <div class="post-container">
      <div class="post-image"> </div>
      <div class="post-title">TEST2016</div>
      <div class="post-share-icons"></div>

    </div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 pl-1 pr-1 ">
      <div class="post-container">
        <div class="post-image"> </div>
        <div class="post-title">TEST2016</div>
        <div class="post-share-icons"></div>

      </div>
      <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 pl-1 pr-1 ">
        <div class="post-container">
          <div class="post-image"> </div>
          <div class="post-title">TEST2016</div>
          <div class="post-share-icons"></div>

        </div>
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 pl-1 pr-1 ">
          <div class="post-container">
            <div class="post-image"> </div>
            <div class="post-title">TEST2016</div>
            <div class="post-share-icons"></div>

          </div>
        </div>

So the question is how to achieve that CSS formatting with or without Bootstrap. I have tried using "float" with "flex wrap" and also "clearfix" without success.

htmlcsstwitter-bootstrapflexboxcss-float

Answer №1

One convenient solution provided by Bootstrap is its built-in utility for handling this issue - you can utilize cards and enclose them within card columns. Further information can be found in the official documentation here

Answer №2

Dealing with this issue can be quite challenging and is often just circumvented. Websites are typically coded in grids, making it easier to organize content into columns and rows. In the scenario you provided, if the row is wrapped around to accommodate the height of the third item, placing the fourth item where you intend may cause it to overlap with the cell of the first item.

One possible solution is to utilize a tool like Masonry, which dynamically calculates top and left positions as you adjust the size. Another approach could involve using flexbox and multiple wrapper divs, but this method can quickly become convoluted and challenging to maintain. The complexity might be so overwhelming that it never gets implemented in a live production environment, due to either difficulty during implementation or the daunting prospect of maintaining it once operational in just a small-scale scenario.

Masonry offers a relatively straightforward layout structure:

<div class="grid">
  <div class="grid-item"></div>
  <div class="grid-item grid-item--height2"></div>
  <div class="grid-item grid-item--height3"></div>
  <div class="grid-item grid-item--height2"></div>
</div>

See an example on JSFiddle.

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

Display the message "Please complete this selection" for the Radio Field in the HTML form

I am facing an issue with error message display in my form. The text input field shows a nice message saying "Fill out this field", but the Radio and Dropdown fields do not show any error messages when left empty. How can I ensure that error messages are ...

htmlforms

The implementation of display flex is causing issues with the material-ui grid layout

Struggling to implement the grid system from material-ui due to an issue where grid items do not resize when resizing the browser window. The culprit seems to be a parent div with the style property "display": "flex". The dilemma arises from using a mater ...

htmlcssreactjsmaterial-ui

WordPress having trouble rendering the stylesheet code

I am facing an issue with Wordpress where my CSS file is not loading properly. The stylesheet contains a rule to center the header image, but for some reason it's not working. I've also tried adding a margin-left of 100px, but that doesn't s ...

csswordpress

Issues with Carousel Plugin Functionality

**Hey everyone, I could really use some help. As a beginner coder, please forgive any errors in my code. I am currently working on a webpage where I need to incorporate a carousel plugin within a panel body to display the latest photos. The code provided ...

jqueryhtmlcsstwitter-bootstrap

Tips for customizing bootstrap's fixed navbar-default to ensure that the list items align downwards:

Is it possible to customize the bootstrap fixed navbar-default so that the li elements align downward instead of at the top? If you have any corrections or custom solutions, I'd love to see them! Feel free to share your code on platforms like CodePen, ...

javascriptjqueryhtmlcsstwitter-bootstrap

Running a JQuery function within an Angular expression

Can Angular expressions execute JQuery code? Here's an example: <span>{{$("[for='loanType']").text()}}</span> I attempted it, but haven't been successful so far. Is there a way to make it work without creating a key/value ...

jqueryhtmlangularjs

What is the best way to remove an entire span element that contains contenteditable spans within it?

The issue I'm facing involves a contenteditable div. Inside, there is a span for a 'fraction', following guidance from this source. Below is my current code snippet: <span style="display:inline-block; vertical-align:middle;" contentedita ...

javascriptjqueryhtmlcsscontenteditable

Do you think it's achievable to modify the color using CSS's order attribute?

When I look at the code in Firefox's inspector, I notice this : element { order:35; } Can a color be assigned to it? I am customizing my year outlook calendar and have set a particular day to display in a different color. But when I click on the mo ...

htmlcsstags

What is the best way to retrieve the current value of an *ngFor loop upon button click?

I have been attempting to retrieve the data.login value of the data item that the user has clicked on the avatar image. Despite my efforts, I have not been able to successfully achieve this through various methods found online. How can I access the current ...

htmlnode.jsangularngfor

I am currently implementing pagination for my data and it is functioning properly. However, I have noticed that when I search for specific data, it always appears on

My issue arises when I attempt to paginate my data and then search for specific information. The problem is that even if I am on page 3, the search results always display on page 1, making it difficult for me to locate the relevant data. What I want is for ...

javascripthtmlreactjsreact-nativereact-hooks

The function is not recognized while executing .mb_YTPlayer();

I'm currently working on creating a webpage with a video background using jquery.mb.YTPlayer, but I'm encountering an issue. I'm seeing an error message that says "Uncaught TypeError: undefined is not a function". Here is the code I a ...

jqueryhtmltwitter-bootstrap

The hyperlink in the HTML code is malfunctioning

While working on a Wix website, I encountered an issue with the code snippet below: // JavaScript var countries = [ { name: 'Thailand', link: 'www.google.com' }, { name: 'Tanzania', link: '' }, { name: &ap ...

javascripthtmlcss

Exciting new animation feature in ng-repeat

I have implemented ng-repeat with custom styling and plan to expand the array by adding new items. Here is my code snippet: // Custom JavaScript code var _app = angular.module("userApp", []) _app.controller("usrController", function($scope) { $scope ...

javascriptangularjscss

Is your text appearing vertically in Internet Explorer?

I'm having an issue with my small single page website where the text in a form is displaying vertically instead of horizontally in Internet Explorer. The problematic part is related to "vehicle condition." Any suggestions on what I might be doing wron ...

jqueryhtmlcss

Attempting to attach a particular image, but it consistently ends up linking to different images instead

I am having an issue with linking an image in my footer. Every time I link one image, the link seems to affect all the other widgets in the footer. Is there a way to prevent this from happening? Visit my website Below is the code I used to create a clic ...

htmlcsswordpresshyperlink

The requested external js scripts could not be found and resulted in a net::ERR_ABORTED 404 error

import express, { Express, Request, Response } from 'express'; const path = require("path"); import dotenv from 'dotenv'; dotenv.config(); const PORT = process.env.PORT || 5000; const app = express(); app.use(express.static(path.join ...

javascripthtmlnode.js

Having trouble getting CSS Animation to work in a React project?

I am currently developing a Next.js application using React. const partyButton = useRef(null) const handleParty = () => { setTimeout(() => { partyButton.current.classList.add('party-time'); console.log(party ...

javascriptcssreactjsnext.jsreact-hooks

How to locate the adjacent sibling element of a given XPath from its parent node

I am currently working on correctly identifying the xpath for this specific HTML layout. The only information I have is the name of the first element, which is an input with the id "urn...". My goal is to locate the parent element of the input (a div), the ...

pythonhtmlseleniumxpath

Enhancing the appearance of page navigation

In my WordPress theme, I have set up a pagination at the bottom of search results using the following code: function custom_pagination($pages = '', $range = 2) { $showitems = ($range * 2)+1; global $paged; if(empty($paged)) $paged = ...

phphtmlcsswordpress

When attempting to incorporate the "active" class into a Bootstrap 4 carousel using jQuery, issues arise specifically when retrieving data from a MongoDB database

I'm working on a carousel feature where I need to load images from my MongoDB database. However, the issue I'm facing is that even though I've tried adding the active class to the first item, the carousel doesn't transition to display t ...

jqueryhtmlnode.jsmongodbejs