Unable to match the height of the inner card image in bootstrap with the height of the outer card image

I'm facing an issue with two bootstrap cards, one nested inside the other, both containing images.

Check out the StackBlitz here

The inner image doesn't flex to the same height as the outer one, resulting in a small space between the two cards unless the page is very large. Here's what I mean: https://i.stack.imgur.com/xV0Ov.png

I want both images to have the same height so that there's no gap at the bottom of the nested card.

Some questions I have:

  1. Is this a sizing issue with the images?
  2. Could it be a problem with how Bootstrap cards are being flexed?

You can find the code I posted below:

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e6968996968394c88c95a6d7c8d7d0c8d6">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<div class="card mb-3">
  <div class="row no-gutters">
    <div class="col-md-4">
      <img src="https://res.cloudinary.com/k9dapp/image/upload/c_scale,w_1920/v1569538702/mainpage/main-one_hn4sle.jpg" class="card-img" alt="yogaband">
    </div>
    <div class="col-md-8">
      <div class="card-body" style="padding-top: 0; padding-bottom: 0; ">

        <div class="card">
          <div class="row no-gutters">
            <div class="col-4">
              <img src="https://res.cloudinary.com/k9dapp/image/upload/v1576863803/ll4uksfotqfndhizgt4q.jpg" class="card-img" alt="instructor">
            </div>
            <div class="col-8">
              <div class="card-body">
              </div>
            </div>
          </div>
        </div>

      </div>
    </div>
  </div>
</div>

htmlcsstwitter-bootstrap

Answer №1

In my opinion, it would be beneficial to include this CSS snippet to set the height of images on your website. 

.card-img{ height:valueYouDesire; }

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

Guide on creating a menu that remains open continuously through mouse hovering until the user chooses an option from the menu

I have a unique scenario where I am working with two images. When the mouse hovers over each image, two corresponding menu bars appear. However, the issue is that when the mouse moves away from the images, the menu disappears. Any suggestions on how to im ...

javascriptjqueryhtmlcss

Tips for resizing images to fit different screen sizes on your website

I have a website with an image that is currently responsive thanks to bootstrap. The width adjusts properly on different devices, but I want the image to crop to the left and right when it's enlarged in this specific case. I've tried various tec ...

htmlcssresponsive

The concept of setting a value is not defined in JavaScript when compared to

Within my primary python script, the following code snippet is present. @app.route('/accounts/test/learn/medium') def medium(): word = random.choice(os.listdir("characters/")) return render_template('accounts/test/medium.html', word=w ...

javascriptpythonhtmlflask

The seamless flow of web design

Seeking guidance on creating a responsive web page. I have a functional website that looks great on my 13" MacBook, but encounters distortion at different screen sizes. What steps are necessary to ensure it appears crisp and appealing on any device? Should ...

javascripthtmlcss

Looking for search suggestion functionalities in an HTML input field

I am currently working on a website project and have a database filled with recipes to support it. The issue I am facing is related to the search feature on my webpage. At the top of the page, there is a textarea where users can input their search queries ...

javascripthtmljsonsearch

Removing the gap between the clicked point and the draw point in Html5 canvas

To better understand my issue, please refer to the image linked below: In the image, you can see that when I scroll down and click on the canvas to point a position, it creates space between the clicked point and where the line is drawn. Below is the cod ...

javascriptjqueryhtmlcanvas

Create a Bootstrap modal that includes a checkbox option to prevent it from appearing again in

I am attempting to display a bootstrap modal upon body load based on a value retrieved from a MySQL database. The bootstrap modal is included in the body and shown successfully depending on the database value using the following code snippet: $results ...

phpjqueryajaxtwitter-bootstrapbootstrap-modal

Retrieve an item from the Ionic Firebase database

My current challenge is retrieving data from the Firebase database. user-service.ts getProfile(){ try {; return this.afDatabse.object(`profile/${this.afAuth.auth.currentUser.uid}`); } catch (e) { console.log(e); } } c ...

javascripthtmlangularfirebaseionic-framework

When I click on .toggle-menu, I want the data-target to have a toggled class and the other divs to expand

Looking to achieve a functionality where clicking on .toggle-menu will toggle a class on the specified data-target element and expand other divs accordingly. jQuery(document).ready(function() { var windowWidth = jQuery(window).width(); if (win ...

javascriptjquerycss

Attempting to align content in the middle of the page across all web browsers

I need assistance with centering all the content on my website across different screen sizes and browsers. Currently, everything appears off-center and aligned to the left on various screens I have tested. You can view the HTML and CSS code in this link. H ...

htmlcss

What could be the reason for the sudden malfunction of the .tabs li:hover property on my

I'm having trouble with the :hover effect not working on my .tabs li element. I've tried commenting out my jQuery script, but it still won't apply. Can anyone help me figure out why? Here's a JSFiddle link for reference: https://jsfidd ...

htmlcsshover

Embracing Divs Similar to the Grid Selector in Windows Phone

Can someone help me create square divs in HTML 5, similar to the example shown? I have written this HTML5 Code - what should I include in the CSS file to achieve the desired outcome? (If Bootstrap can be used, please provide the necessary classes instead ...

csshtml

From HTML to Python to Serial with WebIOPi

I am facing a dilemma and seeking help. Thank you in advance for any guidance! My project involves mounting a raspberry pi 2 b+ on an RC Crawler rover, utilizing WebIOPi for the task. However, I am encountering challenges and unable to find useful resourc ...

javascriptpythonhtmlwebiopi

Is there a way to prevent EasyTabs from automatically selecting the second tab?

I'm facing an issue with setting the default tab using easytabs. Currently, the second option is automatically selected as the default tab. Previously, I had successfully set the first tab (statistics) as the active tab but lost the file. Now, I am s ...

htmlcss

Boundaries on Maps: A guide to verifying addresses within a boundary

User provides address on the website. If the address falls within the defined boundary, it is marked as "Eligible". If outside the boundary, labeled as "Ineligible". Are there any existing widgets or code snippets available to achieve this functio ...

javascriptcssdictionarykmlboundary

Maximizing Bootstrap's Potential: Achieving Right Alignment for Divs

I am facing a challenge with aligning my div in the layout_cshtml. Currently, it is aligned to the left and the search bar and dropdownlist are not displaying properly. This negatively impacts the user experience. Additionally, my navigation menu is not ...

htmlcssasp.net-mvcbootstrap-4

What is the process for incorporating a new task into my HTML/CSS/JavaScript to-do list application when the Enter key is pressed?

Currently, I am working on developing a to-do list application using HTML, CSS, and JavaScript. The application includes a text input field for users to enter their tasks, along with an "Add Task" button. However, I want to enhance the user experience by a ...

javascripthtmlcssdeploymenttodo

How can I ensure that Chakra UI MenuList items are always visible on the screen?

Currently, I am utilizing Chakra UI to design a menu and here is what I have so far: <Menu> <MenuButton>hover over this</MenuButton> <MenuList> <Flex>To show/hide this</Flex> </MenuList> </ ...

javascriptcssreactjsnext.jschakra-ui

What are some strategies for keeping the focus state on the parent item in a dropdown menu?

When I interact with the dropdown menu in my navigation bar, the color changes for the child items. How can I make sure that the parent item maintains the same colored background even after clicking elsewhere on the page? To better understand the issue, i ...

htmlcss

Using jQuery to modify CSS properties in the propertyName

With jQuery v1.6.4, I am attempting to dynamically format some objects. Take a look at my code snippet: <html> <head> <script src="http://code.jquery.com/jquery-1.6.4.min.js" type="text/javascript"></script> <script type="text ...

jqueryhtmlcss