Ensuring Uniform Column Height in Bootstrap 4: A Step-by-Step Guide

Check out this image:

https://i.sstatic.net/yb8ar.jpg

The 2nd column is on the right, but it appears that its height is not equal to the first column. I need to determine how to make the 2nd column the same height as the first column.

This is my HTML:

<div class="row"">
  <div class="col-8">
    <div class="row">
      <div class="col-12 mb-2">
        <div class="imgcontainer">
          <img src="https://loremflickr.com/1280/720" class="img-fluid" alt="Picture">
          <div class="top-left">Top Left</div>
        </div>
      </div>
      <div class="col-12">
        <div class="imgcontainer">
          <img src="https://loremflickr.com/1280/720" class="img-fluid" alt="Picture">
          <div class="top-left">Top Left</div>
        </div>
      </div>
    </div>
  </div>
  <div class="col-4">
    <div class="row">
      <div class="col-12">
        <div class="imgcontainer">
          <img src="https://loremflickr.com/1280/720" class="img-fluid" alt="Picture">
          <div class="top-left">Top Left</div>
        </div>
      </div>
      <div class="col-12">
        <div class="imgcontainer">
          <img src="https://loremflickr.com/1280/720" class="img-fluid" alt="Picture">
          <div class="top-left">Top Left</div>
        </div>
      </div>
      </div>
      <div class="col-12">
        <div class="imgcontainer">
          <img src="https://loremflickr.com/1280/720" class="img-fluid" alt="Picture">
          <div class="top-left">Top Left</div>
        </div>
      </div>
    </div>
  </div>
</div>
htmlcssbootstrap-4

Answer №1

Utilize the flexbox utilities to create a layout where the right column has 

display:flex, flex-direction: column
...

<div class="container-fluid">
    <div class="row">
        <div class="col-8">
            <div class="row">
                <div class="col-12 mb-2">
                    <div class="imgcontainer">
                        <img src="https://loremflickr.com/1280/720" class="img-fluid" alt="Picture">
                        <div class="top-left">Top Left</div>
                    </div>
                </div>
                <div class="col-12">
                    <div class="imgcontainer">
                        <img src="https://loremflickr.com/1280/720" class="img-fluid" alt="Picture">
                        <div class="top-left">Top Left</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-4 d-flex flex-column">
            <div class="row flex-fill justify-content-between">
                <div class="col-12">
                    <div class="imgcontainer">
                        <img src="https://loremflickr.com/1280/720" class="img-fluid" alt="Picture">
                        <div class="top-left">Top Left</div>
                    </div>
                </div>
                <div class="col-12">
                    <div class="imgcontainer">
                        <img src="https://loremflickr.com/1280/720" class="img-fluid" alt="Picture">
                        <div class="top-left">Top Left</div>
                    </div>
                </div>
                <div class="col-12 d-flex align-items-end">
                    <div class="imgcontainer">
                        <img src="https://loremflickr.com/1280/720" class="img-fluid" alt="Picture">
                        <div class="top-left">Top Left</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

https://www.codeply.com/go/hlHhjz3K1Q

Answer №2

If you're looking to implement something similar, you can use the following code snippet:

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

<div class="container">
  <div class="d-md-flex">
    <div class="flex flex-row flex-nowrap">
      <img src="https://i.imgur.com/exWWySt.png">
      <img src="https://i.imgur.com/exWWySt.png">
    </div>

    <div class="flex-column">
      <img src="https://i.imgur.com/exWWySt.png" height="300">
      <img src="https://i.imgur.com/exWWySt.png" height="300">
      <img src="https://i.imgur.com/exWWySt.png" height="300">
    </div>
  </div>
</div>

Check it out on Codepen

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

CSS Alignment in React with Material UI

Is there a way to align one button to the left while centering the other two? To see an example in Codesandbox, please visit HERE <DialogActions sx={{ justifyContent: "center" }}> <Button>Left</Button> <Button on ...

cssreactjsmaterial-ui

Attempting to implement a basic AngularJS integration with Google Maps for a straightforward demonstration

I have a basic Google Maps project that I am trying to transition into an AngularJS project. This is all new to me as I am a beginner in both AngularJS and web development so please bear with me :) The project can be found at https://github.com/eroth/angul ...

javascripthtmlgoogle-mapsangularjsweb-applications

Guide to vertical centering of inline elements within an inline-block using HTML and CSS

Despite reading numerous resources and articles on vertical alignment/centering in HTML/CSS, I still can't seem to get my specific case working as expected. If you have a moment, please take a look at http://jsfiddle.net/pf29r/3/ <div class="oute ...

htmlcss

preventing CSS hover effects

One of the CSS classes I have defined is for a button, which looks like this: .MyButton{ color:black; background:white;} .MyButton:hover{ color:white; background:black;} This class is used for pagination buttons. When a button reaches its bounds, I ...

jquerycss

When I try to click on the tabs in the menu, I find that I am unable to be redirected to another

Hi everyone, I am having an issue with this code where when I click on any tab, it's not working. I have checked for errors but couldn't find any, yet the tabs are not redirecting to the next page as expected. Please help me fix this problem. &l ...

html

Locate the web element that includes an unspecified span text

Presented below is an HTML snippet that illustrates my current dilemma. https://i.sstatic.net/kezoU.png The objective at hand involves utilizing user-input values to identify and extract specific elements from a given PagePostsSectionPaglet. This process ...

javahtmlseleniumxpath

Creating a Dynamic Landing Page with Node.js and Express

Recently, I purchased an HTML landing page and am a complete novice in this area... Upon inspection, I noticed there are three distinct folders: /windows /ios /android I'm interested in utilizing nodejs and express to showcase the landing page. Spec ...

htmlnode.jsexpresstwitter-bootstrap-3

Filtering by distance in Django solely with Sqlite, excluding the use of GeoDjango, PostGres, MySQL, and GIS features

I've built a Django app that requires filtering users based on their proximity to the logged-in user's location. Currently, I'm able to retrieve and store the latitude and longitude coordinates of the logged-in user using HTML5 in a SQLite ...

pythondjangohtmlsqlitedjango-models

What methods could a web crawler use to access and analyze the content within ::before?

In the world of web development, a pseudo element like ::before or ::after may seem invisible in the DOM tree. It's a tricky situation because you can't just target it using a selector. So, how do you retrieve the content within a pseudo element ...

cssweb-crawlerpseudo-elementscrapycss-content

Is there a concept of negative margin "wrapping"?

I am currently working on the website . I am facing an issue where the left arrow is not appearing in the same position as the right arrow. When I try to mirror the same adjustment I made for the left arrow by using margin-left: -75px, it seems to 'wr ...

htmlcss

Identify when a click occurs outside specific elements

I've been searching for solutions to address this issue, but so far nothing has worked. Here is the JavaScript code I am using: var specifiedElement = document.getElementById('a'); document.addEventListener('click', function(eve ...

javascripthtmlcss

LessCss creates CSS by inheriting styles from the parent class up to the nested caller

Let's kick things off with an example, shall we? Imagine I have the following class: <html class="browser-ie"> ... Now, let's say I want to use my mixin on a specific element: .browser-ie(@mixin){ html.browser-ie { ...

cssless

CSS that allows elements to float both to the right and left with independent sizes

Attempting to achieve left and right floating that is independent of height... Take a look at my example. In this example, 2 and 4 appear to have a space between them. Unsure of the best way to implement this without encountering issues in different brows ...

htmlcss

The Facebook Comments widget causes the webpage to automatically scroll to the bottom on older versions of Internet Explorer like

My webpage is quite lengthy and includes a Facebook comments widget at the bottom. However, when loading in IE7 and IE8, the page instantly jumps to the bottom due to this widget. Interestingly, removing the widget allows the page to load normally. This ...

javascripthtmlfacebookinternet-explorerloading

trouble with react-table's default height and flexible design

I am facing an issue with my React table configuration. I have set up scrollable columns and header following a similar example here: https://codesandbox.io/s/kowzlm5jp7?file=/index.js:281-310 In the table styles, I have specified a height like this: ...

cssreactjsreact-table

How to make Bootstrap 4 navbar tabs collapse using card accordion functionality

Check out this interactive example: https://jsfiddle.net/dominijk/bLpach25/1/ The accordion layout I have set up consists of collapsible cards where opening one card causes the others to collapse. The tabs within each card are functioning properly. My go ...

javascripthtmlcssbootstrap-4

Issues with Iframe { height:70%;} in Internet Explorer 8 and Firefox causing display problems

In my website's design, I have a div structure with an iframe to load pages. The header remains at the top seamlessly The footer stays at the bottom perfectly The content is positioned in the middle flawlessly However, the iframe does not stret ...

htmlasp.netcssiframe

Layout of CSS grid being created dynamically

The concept of the CSS grid layout, as explained here, demonstrates that the grid cells are structured in the markup without hierarchy. The arrangement into rows and columns is managed through CSS directives like grid-template-columns. An illustration for ...

javascripthtmlcssvue.jstemplates

Developing a webView for the C# / Mono Launcher application

Currently, I am working on developing a C# mono launcher using Xamarin Studio. My goal is to create the interface with HTML and CSS in a webView. Is it possible to achieve this in C#? If so, could you please provide some guidance on how to accomplish this ...

c#htmlcsswebview

Troubleshooting CSS font-variation-settings not functioning

Exploring the possibilities of variable fonts has been my latest project. In my initial test, I played around with the font-variation-settings directive, but unfortunately, it doesn't seem to be functioning properly. This was evident on both Codepen: ...

css