Grid alignment issue with images on Bootstrap 4.0 - resolution needed

Currently, I am working on a mini project that involves recreating a website using Bootstrap 4. I am at a stage where I need to display three images in a grid format with two on the top and one on the bottom. The challenge is to make the top two images even in height, despite the size difference in width, just like the example below:

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

As you can see, the top images are perfectly aligned, but the bottom one is not.

Here is how my implementation currently looks:

https://i.sstatic.net/99OaB.png

If you observe, the image on the left is slightly taller than the one on the right.

Below is the code snippet for this section:

   <div class="row justify-content-center">
      <div class="col-md-4">
        <img src="assets/home_seasonal_1.jpg" class="img-fluid" alt="Responsive image" >
      </div>
       <div class="col-md-6">
          <img src="assets/home_seasonal_2.jpg" class="img-fluid" alt="Responsive image">
        </div>
      </div>
      <br>
      <div class="row justify-content-center">
        <div class="col-md-10">
          <img src="assets/home_seasonal_3.jpg" class="img-fluid" alt="Responsive image">
        </div>
      </div>

I have experimented with different column configurations, but nothing has yielded the desired result so far. The objective is to achieve this layout without custom CSS and only utilizing Bootstrap.

Below is the version of Bootstrap I am using:

I am seeking some advice on how to achieve the desired layout. Additionally, here are the images:

csstwitter-bootstrapbootstrap-4

Answer №1

When examining the .img-fluid class, it establishes the maximum width as 100% and the height as auto. Consequently, if the container holding the image is narrow, the image may be adjusted in size along with the height.

In addition, upon closer inspection of the desired image, it appears that the first two pictures are displayed from bottom to top, while the third image is displayed from top to bottom.

Given these observations, I am considering using these images as the background of the respective columns instead.

Layout

<div class="container">
    <div class="row justify-content-center">
        <!-- assets/home_seasonal_1.jpg -->
        <div class="col-md-4" style="background: url('https://i.sstatic.net/A5PIq.jpg') center bottom /cover no-repeat"></div>
        <!-- assets/home_seasonal_2.jpg -->
        <div class="col-md-6" style="background: url('https://i.sstatic.net/zVUvf.jpg') center bottom/cover no-repeat"></div>
    </div>
    <div class="row justify-content-center">
        <!-- assets/home_seasonal_3.jpg -->
        <div class="col-md-10" style="background: url('https://i.sstatic.net/xhMX6.jpg') center top/cover no-repeat"></div>
    </div> 
</div>

Design

Although I have taken a simplistic approach in styling these elements, you have the option to apply inline CSS to customize the appearance of each column. I have utilized white borders as a quick styling solution.

.row {
    height: 12rem;
}

[class*="col-md"] {
    border: 2px solid #fff;
}

Outcome

Surprisingly, the result closely resembles the image you envisioned! https://i.sstatic.net/BG4fY.png

Try it yourself: http://jsfiddle.net/aq9Laaew/144953/

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

Retrieve the image and insert it using an img tag

Working on a project, I want to include Instagram profile pictures by embedding them. Although I have the image URL, I am struggling to integrate it into my HTML page. Take a look at this sample: This provided link displays the Instagram profile picture. ...

javascripthtmlcssweb

Place the Div directly above a distinct Div

Hey there! I'm currently working on positioning one div on top of another div programmatically (using javascript or css). These divs are completely separate and have the following structure: <div class="bottom"> <img src="image"></i ...

javascripthtmlcss

How can I transfer a particular data value from a div to JavaScript within Laravel 5.0?

Displaying separate square divs based on integers retrieved from the database. This is the front-end view. I want to pass the room ID (code) to a JavaScript function when clicking on these div elements. https://i.stack.imgur.com/aIYTr.png Below is my cur ...

javascriptphpjqueryhtmlcss

Utilize the bootstrap grid to align content into 4 columns evenly

I have the following code snippet: <div class="panel-body"> <div class="col-sm-6"> <label class="head6">Business Name : </label><span class="head9">'.$name.'</span> </div> <div ...

htmlcsstwitter-bootstrapgridmultiple-columns

How come the CSS for my angular ngx-mat-datetime-picker and mat-datepicker collide when they are both present on the same page?

Within the same form, I have two input fields stacked under each other. One is an ngx-mat-datetime-picker and the other is a mat-datepicker. Individually, they function correctly. However, when I open them for the second time, the one I opened first appear ...

cssangulardatepickerdatetimepicker

How can I apply CSS properties to a div class by targeting another child div class?

When the div class dhx_list_item dhx_list_day_events_item is present, I need to apply the following CSS: .dhx_view .day_events .dhx_scroll_cont:first-of-type:before { //some code here } Please see the attachment for reference. ...

htmlcss

Animating links with multi-line effects on :before.orEnhancing

As per the given query, I have a code snippet Is there any way to apply this effect to multiple lines of text instead of just one line? Currently, the effect only appears on one of two text lines (as shown in the example). :root { --00a3a3: #00a3a3; ...

cssanimation

Updating code to insert elements into an array/data structure using Javascript

Hey everyone, I'm new to Javascript and I'm trying to make a change to some existing code. Instead of just returning the count of elements, I want to add each of the specified elements to an array or list. Here is the original code from a Seleni ...

javascriptpythoncssselenium

Reduced resolution decreases image size significantly (bootstrap-5 Fluid)

What's Currently Happening: While using the Chrome browser's device toolbar tool to test my site at various resolutions, I observed that when I shrink the device screen to "Mobile-s" 320px, the content on my page becomes nearly unreadable. Additi ...

htmlcssbootstrap-4bootstrap-5

Personalize the color scheme for your timeline paper

I am interested in customizing this specific example of a personalized timeline: import React from 'react'; import { makeStyles } from '@material-ui/core/styles'; import Timeline from '@material-ui/lab/Timeline'; import Timeli ...

javascriptcssreactjsmaterial-ui

Circle a component around another on the vertical axis (z-index)

A plugin caught my eye some time back, but I'm having trouble locating it. This nifty tool operates by positioning an element behind another one, then smoothly sliding it to the right. After that, it changes the z-index so the element appears larger i ...

javascriptjqueryhtmlcssplugins

How to position footer at the bottom of Material UI cards - see example below

After getting inspiration from the material-ui example of cards, I wanted to create a grid layout with multiple cards. My goal was to make all the cards have equal height (which I achieved using height:100%) and position the footer at the bottom of each ca ...

javascriptcssreactjsmaterial-ui

Ways to center a div with position:relative vertically on the page

What is the best way to center a position relative div vertically within its parent element? For example: <div class="parent"> <div style="position:relative;" class="child"> </div> </div> Any suggestions on how to vertic ...

csspositioncenter

Various hues blending and intertwining with one another

https://i.stack.imgur.com/zLrNK.png Could someone please clarify what is happening here? I'm attempting to change the background color to dodgerblue, but for some reason, the white background color is still showing through. Below is the code snippet ...

htmlcssangular

Invisible Thinglink image revealed upon resizing browser

I am currently repurposing a pre-existing theme that has a drop-down menu showcasing an image. I am attempting to integrate a Thinglink into the content section of this drop-down, but unfortunately, the image does not appear until I adjust the size of the ...

javascripthtmlcssajax

Invisible boundary line within the column

My task involves creating a table using div elements. The layout of the table includes two columns structured as follows: <div> <div class = "columnborder"><span>Some text for column 1</span></div> <div><span>Some ...

htmlcss

Is there a way to adjust the padding temporarily?

Important Note: Despite the misleading title of my question, it doesn't accurately reflect my actual query (sort of). Below is the code snippet in question: .one{ background-color: gray; } .two{ padding: 20px; } <div class = "one"> < ...

javascriptjqueryhtmlcssuser-interface

Sticky positioning for dropdown menu in table column body

Greetings, I need some assistance with a formatting issue. My goal is to make the first and second columns of my table sticky by applying a "sticky" position to them. However, one of the columns contains a dropdown menu and the problem is that the content ...

htmlcss

The React Bootstrap modal refuses to fully close no matter how many times I click away or even on the close button

I am facing an issue with a modal in my React component. When I open the modal, it does not completely close when I try to click away or hit the close button. The backdrop disappears but the modal itself remains on the screen. (Screenshots attached for r ...

cssreactjsreact-bootstrap

Should the value exceed the designated width of the combobox, it should be displayed across multiple lines

Having an issue where, when I set the width of the combobox and the value inside it is longer than expected, the full value isn't displayed. I am considering displaying the value on multiple lines to ensure the entire content is visible. Unfortunatel ...

htmlcss