Balanced Height Columns using Boostrap and Flexbox

Can anyone help me with styling a gallery using Bootstrap and Flexbox? I want to have one large image next to two smaller stacked images, all of which need to be the same height.

The container columns are maintaining the same height, but I'm having trouble getting the img elements within the column to fill the height of the container.

I managed to make it work in Firefox by using height: 100% on the img, but this solution doesn't work in Chrome and Safari.

img {
    max-width: 100%;
    width: auto\9;
    height: auto;
    vertical-align: middle;
    border: 0;
    -ms-interpolation-mode: bicubic;
}
figure {
    margin-bottom: 0;
}
.rts-col {
    margin-bottom: 30px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="rts-col col-8">
      <figure>
        <img src="http://via.placeholder.com/1400x933">
      </figure>
    </div>
    <div class="rts-col col-4">
      <figure style="margin-bottom: 30px;">
        <img src="http://via.placeholder.com/1400x933">
      </figure>
      <figure>
        <img src="http://via.placeholder.com/1400x933">
      </figure>
    </div>
  </div>
</div>

For more details and code snippets, you can visit my JSFiddle link: https://jsfiddle.net/tylorreimer/q8qe5p80/2/

cssflexboxbootstrap-4

Answer №1

It appears that utilizing nested flexboxes may be the solution for arranging multiple images on one side.

img {
  max-width: 100%;
  width: auto\9;
  height: auto;
  vertical-align: middle;
  border: 0;
  -ms-interpolation-mode: bicubic;
}

figure {
  margin: 0;
}

.rts-col.split {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="rts-col col-8">
      <figure>
        <img src="http://via.placeholder.com/1400x933">
      </figure>
    </div>
    <div class="rts-col col-4 split">
      <figure>
        <img src="http://via.placeholder.com/1400x933">
      </figure>
      <figure>
        <img src="http://via.placeholder.com/1400x933">
      </figure>
    </div>

  </div>
</div>

Answer №2

To align the two images at the top and bottom within a flex container with a column direction, add 

d-flex flex-column justify-content-between
to the 
<div class="rts-col col-4">
.

Additionally, I have adjusted the margins for better alignment:

img {
  display: block;
  max-width: 100%;
}
figure {
  margin: 0;
}
.rts-col {
  margin-bottom: 30px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="rts-col col-8">
      <figure>
        <img src="http://via.placeholder.com/1400x933">
      </figure>
    </div>
    <div class="rts-col col-4 d-flex flex-column justify-content-between">
      <figure>
        <img src="http://via.placeholder.com/1400x933">
      </figure>
      <figure>
        <img src="http://via.placeholder.com/1400x933">
      </figure>
    </div>
    <div class="rts-col col-6">
      <figure>
        <img src="http://via.placeholder.com/1400x933">
      </figure>
    </div>
    <div class="rts-col col-6">
      <figure>
        <img src="http://via.placeholder.com/1400x933">
      </figure>
    </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

The iframe on my WordPress website is not displaying at its full size as intended

Is it possible to embed a link to a website in WordPress that is responsive to different devices, such as desktops and phones with varying screen sizes? On desktops, it looks fine, but on phones, it gets cut off and does not adjust accordingly. Using padd ...

javascripthtmlcsswordpressiframe

Is there a way I can maintain the active state after clicking on a link?

Is there a way to maintain an active element state when navigating to another page after clicking a link? I am wondering if it is possible to use JavaScript to remove the active state from one link and apply it to the next one. I am facing some challenges ...

javascripthtmlcss

Place the p elements outside of the divs and align them accordingly

I have a div containing multiple p elements and I need to align buttons next to certain p elements. I want the buttons to be displayed only for specific p elements, which will be controlled using JavaScript. Normally, I would put each p element in a separa ...

javascriptjqueryhtmlcssalignment

Aligning a Bootstrap button beneath text that is centered on the page

I want to include a button below some text in the contact section. The text reads "get in touch" at the center of the page, but when I add a button it appears under the text and aligned to the left. I need it to be centered on the page beneath the text. ...

htmlcssbootstrap-4

Unable to click on Bootstrap 3 modal within navbar on iOS devices

Visit this website: . You'll notice there is a reservation widget displayed within a modal. Interestingly, in iOS, clicking on the "reserve" link in the navigation bar doesn't open the modal. However, if you click on the "Reservations" link on th ...

jqueryhtmlioscsstwitter-bootstrap

Closing a bootstrap alert will also close the modal it is contained within

I'm currently facing an issue with my code that involves displaying an alert on top of a modal. The problem arises when I try to dismiss the alert using the 'x' button - it ends up dismissing the entire modal as well. Although I've foll ...

twitter-bootstrapbootstrap-4

Optimizing image centering in Next JS as screen size expands

I've been struggling to work with NextJS's Image component. My goal is to set up a banner image that only covers a specific amount of space on the screen, regardless of screen size. I have managed to achieve this by using max-height: 30vh and ov ...

javascripthtmlcssnext.jsnextjs-image

Rails encounters problems when assets are modified

I recently inherited a small Rails website. When I attempted to make a change to a css file, I encountered an error page (code 500) in Rails with the following message: No such file or directory - /.../cache/assets/sprockets%2F1450c8f5d2b6e201d72fa175586b ...

cssruby-on-railsasset-pipeline

Using Paper.js to access and manipulate document.body.style.opacity within a paperscript

My website is essentially one large canvas image. Currently, the body fades in when loaded using this code: <body onLoad="document.body.style.opacity='1'"> However, I want to initiate this fade within my paperscript because sometimes the ...

javascriptcsshtmlpaperjs

Tips for vertically aligning <p> and <div> elements without using the table-cell property

I am trying to align my text vertically in the middle using a ch-grid <div> (the circle color element). Is it possible to achieve this without specifying a display attribute for the <p> element? I plan to hide it by setting display:none initia ...

htmlcss

Tips for enlarging the font size of a number as the number increases

Utilizing the react-countup library to animate counting up to a specific value. When a user clicks a button, the generated value is 9.57, and through react-counter, it visually increments from 1.00 to 9.57 over time. Here's the code snippet: const { ...

cssreactjstypescript

Having trouble with overflow-x? Instead of scrolling just the element, it's causing

My goal is to have the div ".slide" scroll horizontally only, but for some reason, the entire body is scrolling instead. I'm not sure why. If you resize the page to mobile and try scrolling horizontally, you'll see what I mean. Within the div.s ...

htmlcss

What other technique can I use to replace the creation of a jquery division?

I`m relatively new to all things related to web technologies and I am currently practicing and learning about them. On my practice page, I've experimented with various elements, including changing div heights based on the viewport height. Here's ...

javascriptjqueryhtmlcss

Strategizing - positioning columns inside a container

Currently, I am a university student working on a project where I am trying to design a layout with multiple images on the left and text along with a button on the right. Despite using Bootstrap classes, I'm facing an issue with aligning these element ...

htmlcssbootstrap-4

Adding square elements to mat-table in Angular

I'm encountering an issue with the mat-table in my project. I want to incorporate squares into the cells, but I'm unsure how to achieve this. Here is a snippet of my current code: <div class="my_item"> <div><span class="s ...

htmlcssangularangular-material

Content in the Bootstrap carousel vanishes without warning after a period of time

I am facing an issue with a carousel I added to a section of my website using HTML, CSS, and Bootstrap 5. The problem is that after some time, the content and the carousel inside that section disappear. Reloading the page temporarily fixes this issue but ...

htmlcsstwitter-bootstrapresponsivebootstrap-5

create an HTML element using JavaScript to display a box with dimensions of n

I am attempting to create a grid in an HTML document using only plain JavaScript. The idea is to take a number from a URL and use that as the basis for generating the grid. For example, if my URL looks like this: abc.html?num=5, then I would need to creat ...

javascripthtmlcss

broken alignment of right-aligned Bootstrap navbar

I need help with displaying a navbar on my webpage. I want the right side of the navbar to show different elements based on whether the user is logged in or not. If the user is not logged in, it should display "Login" and "Register," and if they are logged ...

htmlcsstwitter-bootstrap

Modify The Source Code of an Image

HTML Markup <img class="blog-picture ul-normal-classic" src="https://example.pk/wp-content/uploads/2020/12/example300-300x203.jpg" alt="Beintehaa300"> What I'm Looking For: <img class="blog-picture ul-norma ...

javascriptphphtmlcsswordpress

Tips for centering the second content within a div block

<div style="height: 100%; background: red"> <div style="height: 100px; background: green"> </div> <div style="background: blue;"> <h1>Content</h1> </div> </di ...

htmlcss