Ensuring Bootstrap4 columns have a minimum height within a row

How can I adjust the right column in this image layout to crop the height and match it with the left column, aligning the bottoms of the images? This customization should only apply to lg+ screen sizes.

An ideal solution using Bootstrap 4 without jQuery is preferred.

<div class="row">
  <div class="col-12 col-lg-6">
    <div class="row">
      <div class="col-12">
        <div>
          <a href="#">
            <img class="img-fluid" style="margin-bottom: 30px;" src="https://images.freeimages.com/images/large-previews/199/sunflowers-6-1392951.jpg">
          </a>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-12">
        <div>
          <a href="#">
            <img class="img-fluid" style="margin-bottom: 30px;" src="https://images.freeimages.com/images/large-previews/199/sunflowers-6-1392951.jpg">
          </a>
        </div>
      </div>
    </div>
  </div>

  <div class="col-12 col-lg-6">
    <div>
      <a href="#">
        <img class="img-fluid" style="" src="https://images.freeimages.com/images/large-previews/5e6/clouds-1396327.jpg">
      </a>
    </div>
  </div>
</div>

edit: corrected link

cssbootstrap-4

Answer №1

Is this the solution you were looking for? If not, please inform me.

<div class="row">
    <div class="col-12 col-lg-6">
        <div class="row">
            <div class="col-12">
                <div>
                    <a href="#">
                        <img class="img-fluid" style="margin-bottom: 30px;"
                            src="https://images.freeimages.com/images/large-previews/199/sunflowers-6-1392951.jpg">
                    </a>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-12">
                <div>
                    <a href="#">
                        <img class="img-fluid"
                            src="https://images.freeimages.com/images/large-previews/199/sunflowers-6-1531758.jpg">
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="col-12 col-lg-6">
        <div class="h-100">
            <a href="#" class="d-flex h-100">
                <img class="img-fluid" style=""
                    src="https://images.freeimages.com/images/large-previews/e2b/clouds-1389117.jpg">
            </a>
        </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

Managing column counts in form groups using BootstrapVue

When I use BootstrapVue to create a form group with input fields and select boxes that are dynamically added on a button click, I need to display another element (such as a button or div) to the right of it for removing the field by binding a click event. ...

vue.jsbootstrap-4

The Bootstrap 5 navigation bar does not extend to the full width of its parent

While working on a Bootstrap navigation inside a container, I encountered an issue where the navigation bar was not expanding to match the width of the container. It seemed like the padding had to be manually adjusted to fit properly. Below is the code sn ...

javascripthtmlcssbootstrap-5

Tips for concealing a chosen alternative from the menu of options when utilizing mat-select

I am currently working with the latest version of mat-select, version 16. I have a requirement where, when a specific option is selected and the select drop-down is clicked again, that selected option should not appear in the options list. Below is the HTM ...

htmlcssangularmat-select

Having trouble displaying an image in your React project?

I'm having an issue with my code where the logo is not displaying, even though it should be in the src -> pages -> images folder. I can't seem to figure out why this is happening. import dress from "./images/dress.png"; const I1 = () => ...

htmlcssreactjs

Having trouble with Isotope masonry functionality

While experimenting with Isotope from , I tested the reLayout method using the provided example found at . I copied the css and js to my page () but encountered an issue where clicking on the first element caused all other elements to move to the first col ...

javascriptjquerycss

Ways to Randomly Flip Divs

I have developed an application where all divs flip vertically on hover. I am looking for a way to make the flipping random without requiring a hover. Any ideas on how to achieve this? .vertical.flip-container { position: relative; float: left; ma ...

javascriptjqueryhtmlcss

Input Fields Will Not Resize Correctly in Some Browsers

When resizing a browser, the input fields do not resize properly and end up overlapping each other in the middle, causing distortion before the media script adjusts everything to 100%. The width of the text area set to 100% does not align with the forms. F ...

htmlcss

Animating a spinning SVG path around its center within a larger rectangular box

Is there a way to rotate a smaller SVG path within a larger rectangle around its own center? The current code rotates the entire space. <animateTransform attributeType="xml" attributeName="transform" type="rotat ...

csssvg

Assign a class to a newly created element using JavaScript

I have a unique element that I've created using the code below: connectedCallback() { var custom_element = document.createElement('Div'); custom_element.class = 'element demo3'; this.appendChild(custom_element); } Howeve ...

htmlcsscustom-element

Is there a way to conceal a Select element so that it is not visible on the screen, yet can still activate the dropdown menu when another element is clicked

One idea for my website is to replace a select element with a button that triggers the dropdown. The plan is to place the select element inside a button DIV, position the select element on top of the button, and set its opacity to 0 so it appears hidden. W ...

htmlcssdrop-down-menu

Changes in menu layout in response to window resizing

The menu needs to be centered on the website and adjust to the browser window resizing. Currently, it's positioned in the center and the animation is working fine. However, when I attempt to make the menu responsive so that it stays centered when resi ...

javascriptjqueryhtmlcss

Embed full content in iframe using bootstrap 4

Embedding an iframe of an appointment scheduling frontend on my page has been a challenge. While the width is correct, the height of the frame is too small. Despite attempting various CSS modifications, I have not been able to achieve the desired result. I ...

javascriptcssbootstrap-4

Opera browser having trouble with sidebar rendering

On my best days, I struggle immensely with troubleshooting browser display issues. The left-hand sidebar on this page () appears incorrect in Opera. While in all other browsers, the sidebar displays with an orange and tan background, for some unknown reas ...

htmlcssopera

Customizing Material UI CSS in Angular: A Guide

Recently, while working with the Mat-grid-tile tag, I noticed that it utilizes a css class called .mat-grid-tile-content, which you can see below. The issue I am encountering is that the content within the mat-grid-tile tag appears centered, rather than f ...

cssangulartypescriptmaterial-ui

What is the best place in Rails to add @media CSS tags?

Currently, my layout.html.erb contains some CSS rules with @media queries. <style> @media (max-width: 900px) { .green-button{ display: none!important; } .chat_button{ margin-top: 20px!important; } #myCarousel{ ...

cssruby-on-rails

Two separate pieces of text converge within a single span

I am facing a challenge with alignment in a bootstrap <span> element. Specifically, I want to align the word "amount" to the left, and the "$" to the right, within the same label. I attempted to nest a <span> inside another <span> and app ...

htmlcsstwitter-bootstrap

Utilizing CSS to smoothly transition elements as they fill in empty space

As I have multiple blocks of content, I slide one to the side and then remove it. Once that is completed, I want the blocks below it to smoothly move up and fill the space. Check out this JSFiddle Example for reference HTML Code <div id="container"&g ...

htmlcsstransition

Click on the link that surrounds an inline-block span in Internet Explorer

In Chrome and Firefox, the following code works fine and makes the container clickable. However, in Internet Explorer, only the inner div changes the cursor to indicate that it's clickable, not the span. I could use cursor:pointer to fix this issue, ...

internet-explorerhtmlcss

Using jquery to target and manipulate elements with the div selector

I need assistance with adding a selector on my webpage where users can choose one option and retrieve the id of the selected part. This id will then be used in a link. I am new to using jQuery, so I am having trouble implementing this feature. Below is an ...

jquerycssselector

Menu Tabs with Rounded Edges

Seeking help to round the corners of a tabbed dynamic menu using Drupal and the dynamic-persistent-menu module. The code provided below is almost perfect, with 99% accuracy. View the current state of the menu here: . Can anyone assist in achieving the rema ...

cssimagebackground