Issue with image not fully encompassing div in Bootstrap 5

Currently working on a grid layout with images within the Bootstrap 5 framework.

Here is the code snippet for the grid:

#project_images img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
<section>
            <div class="container" id="project_images">
                <div class="row gy-3 gy-lg-4">
                    <div class="col-12">
                        <div class="row gx-3 gy-3 gx-lg-4 gy-lg-4">
                            <div class="col-12 col-md-7"><img class="img-fluid" src="assets/img/Geotar_1.jpg"></div>
                            <div class="col-12 col-md-5"><img class="img-fluid" src="assets/img/Geotar_2.jpg"></div>
                        </div>
                    </div>
                    <div class="col-12">
                        <div class="row gx-3 gy-3 gx-lg-4">
                            <div class="col"><img class="img-fluid" src="assets/img/Geotar_3.jpg"></div>
                            <div class="col-md-4">
                                <div class="row gx-0 gy-3 gy-lg-4">
                                    <div class="col-12"><img class="img-fluid" src="assets/img/Geotar_4.jpg"></div>
                                    <div class="col-12"><img class="img-fluid" src="assets/img/Geotar_5.jpg"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

While all images are fitting perfectly within the "div" container with the given CSS rules, there seems to be a discrepancy with the bottom right image ("Geotar_5.jpg"). It does not fill the "div" container completely, causing a visible gap as shown in the screenshot linked below.

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

htmlcsstwitter-bootstrapbootstrap-5

Answer №1

Include d-flex align-items-stretch Bootstrap classes in the col-md-4 element.

Refer to the code snippet below.

#project_images img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap demo</title>
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6e0c01011a1d1a1c0f1e2e5b405c405d">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</head>

<body>
  <section>
    <div class="container" id="project_images">
      <div class="row gy-3 gy-lg-4">
        <div class="col-12">
          <div class="row gx-3 gy-3 gx-lg-4 gy-lg-4">
            <div class="col-12 col-md-7"><img class="img-fluid" src="https://i.guim.co.uk/img/media/610c4cdf8c386b34153a0a5addc98db1a5129185/0_288_4380_2629/master/4380.jpg?width=1200&height=900&quality=85&auto=format&fit=crop&s=b6094b41c691a8bf00a5f1f689b9e83f"></div>
            <div class="col-12 col-md-5"><img class="img-fluid" src="https://i.guim.co.uk/img/media/610c4cdf8c386b34153a0a5addc98db1a5129185/0_288_4380_2629/master/4380.jpg?width=1200&height=900&quality=85&auto=format&fit=crop&s=b6094b41c691a8bf00a5f1f689b9e83f"></div>
          </div>
        </div>
        <div class="col-12">
          <div class="row gx-3 gy-3 gx-lg-4">
            <div class="col"><img class="img-fluid" src="https://i.guim.co.uk/img/media/610c4cdf8c386b34153a0a5addc98db1a5129185/0_288_4380_2629/master/4380.jpg?width=1200&height=900&quality=85&auto=format&fit=crop&s=b6094b41c691a8bf00a5f1f689b9e83f"></div>
            <div class="col-md-4 d-flex align-items-stretch">
              <div class="row gx-0 gy-3 gy-lg-4">
                <div class="col-12"><img class="img-fluid" src="https://i.guim.co.uk/img/media/610c4cdf8c386b34153a0a5addc98db1a5129185/0_288_4380_2629/master/4380.jpg?width=1200&height=900&quality=85&auto=format&fit=crop&s=b6094b41c691a8bf00a5f1f689b9e83f"></div>
                <div class="col-12"><img class="img-fluid" src="https://i.imgur.com/K2R24I4.jpeg"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b7d5d8d8c3c4c3c5d6c7f78299859984">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7L+jL+jXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
</body>

</html>

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

Sending Javascript Variable through Form

I'm a newcomer to JavaScript and struggling to solve a particular issue in my script. I need help passing the variable "outVal" to a PHP script when the submit form is clicked. The value of "outVal" should come from the "output" value in the script. I ...

javascripthtmlforms

Getting the nth-child rule for CSS in IE9 to function properly in IE8

This code is functioning in IE9: body.country-XYZ .abc:nth-child(3) { display:none; } As :nth-child() is effective in IE9 and newer versions, what can be done to ensure it also functions on IE8? Can you suggest an alternative method for achieving th ...

cssinternet-explorer-8

Tips for displaying animations only the first time using HTML and CSS:

Upon the initial visit to my website, a captivating animation introduces itself with the words "Hello. I'm Bob" as it gracefully fades into view. Navigating through the menu bar allows users to explore different sections of the site. However, there ...

javascriptjqueryhtmlcssanimation

Can you explain the significance of the <%= %> HTML tag?

I've recently been tackling a project with Webpack. For those not familiar, Webpack is a bundler that combines all your files into one final product. One task I encountered was trying to insert one HTML file into another, similar to an import or requ ...

javascripthtmlwebpacktags

What is the most effective method for implementing a background repeated image in Foundation 4 framework?

Currently, I am utilizing the foundation4 framework for my website. In order to achieve a repeating tiled background, I have crafted a custom CSS file and included the following code snippet: body { background: url(img/floorboardsbg.jpg) repeat; } Whi ...

htmlcsszurb-foundation

What methods can a web server or website use to trigger the re-caching of its own content?

We have recently launched a simple HTML and JS website that requires frequent updates to be reflected to users quickly. However, we are facing challenges with users having to clear their caches. We are exploring options within the HTML file or the Apache w ...

htmlexpressapachebrowserbrowser-cache

Set the button to align on the left side within a Bootstrap card

Creating grid elements in Bootstrap 3, I am faced with a challenge. When the viewport is below <768px, I want to align a button in the same position as shown in the image with the lion. Check out the demo site here. For viewports >768px, the button ...

htmlcsstwitter-bootstrap

Maintain font kerning for span elements that are not displayed inline

I am looking to add some transform effects to individual letters in a word. To achieve this, I have enclosed each letter within a span element. However, when setting the display of these spans to inline-block, the font kerning gets disrupted. I have exper ...

htmlcss

Learn the best way to utilize a stylus in Vue files to interact with JavaScript variables

For instance: <script> export default { data() { return{ varinjs: 1, } } } </script> <style lang="stylus"> varincss = varinjs body if varincss == 0 ba ...

cssvue.jssasslessstylus

Vue: update data and trigger function upon completion of animation transformation, utilizing animation transformation completion listener

Check out this straightforward Vue example: https://codesandbox.io/s/sleepy-haze-cstnc2?file=/src/App.vue https://i.stack.imgur.com/zboCb.png Whenever I click on the square, it not only changes color but also expands to 200% of its original size with a 3 ...

javascripthtmlcssvue.jsvuejs3

Unable to alter or eliminate the grey background using material-ui

Struggling with a React application that incorporates material-ui. Despite my efforts, I can't seem to get rid of an unwanted grey background in one section of the app. Attempted solutions: body { background-color: #ffffff !important; } * { b ...

cssreactjsmaterial-ui

Determining the visible dimensions of an iframe

Is there a way to determine the visual size inside an iframe using JavaScript or jQuery? In this scenario, only a portion of the iframe is displayed. The iframe itself has dimensions of 300x300, but it is being limited by a div to 300x100. <div style= ...

javascriptjqueryhtmlcss

Problems with the navigation bar scrolling in Bootstrap

The project I'm currently working on is located at zarwanhashem.com If you'd like to see my previous question along with the code, you can check it out here: Bootstrap one page website theme formatting problems Although the selected answer help ...

javascriptjqueryhtmlcsstwitter-bootstrap

The variable in Angular stopped working after the addition of a dependent component

Currently, I am working with Angular and have implemented two components. The first component is a navigation bar that includes a search bar. To enable the search functionality in my second component (home), I have added the following code: HTML for the n ...

javascripthtmlangulartypescript

Adding the text-success class to a Bootstrap 5 table row with zebra striping does not produce any noticeable change

I am encountering an issue with a Bootstrap 5 table that has the class table-striped. When a user clicks on a row, I have implemented some jQuery code to toggle the class text-success on the row for highlighting/unhighlighting purposes. The highlighting f ...

javascripthtmljquerycssbootstrap-5

Ways to substitute numerous instances of a string in javascript

I have experience in developing websites using reactjs. I usually implement restAPI's with java and work with liferay CMS. In one of my projects, I created a shortcode for accordion functionality like this: ('[accordion][acc-header]Heading 1[/ac ...

javascripthtmlreactjsliferay

Is it possible to integrate a standard drop-down menu/style into a MUI Select component?

I am currently working on implementing the default drop-down menu style for my MUI Select Component. Here is the desired menu appearance: https://i.stack.imgur.com/GqfSM.png However, this is what my current Select Component looks like: https://i.stack. ...

javascriptcssmaterial-uidrop-down-menujsx

Hiding divs toggle off when either all or only one is selected

In a certain page, there is a script that displays a div when a user selects an option. The script functions correctly, except for a scenario where if the user selects 'd' (which shows 'a', 'b', and 'c'), and then se ...

javascriptjqueryhtmlcss

The width of the Div is set to 100%, yet there is still some empty space visible on

I am having trouble setting the background of my code to display a picture that is 300px in height and 100% in width. However, when I set the width to 100%, there are about 15px gaps on each side. I could adjust the width to 1000px, but that presents issue ...

htmlcssspacing

The most recent update of Blink does not support the complex selector :nth-child(2):nth-last-child(2){}

There is an unusual issue: after a recent update, the selector .groups .group:nth-child(2):nth-last-child(2){} suddenly stopped working. However, it still works perfectly in Webkit and Gecko browsers. Any thoughts on how to resolve this? Snippet of HTML ...

csswebkitcss-selectorsblink