Tips for adjusting image size within a Bootstrap card

I am having trouble getting the images to properly fit inside the card. Even when I set the width to 100%, they are not adjusting correctly. Can anyone provide guidance on how to fix this issue?

Thank you

Below is the HTML code for the card:

.card {
  margin-right: 25px;
  margin-top: 25px;
  margin-left: 25px;
  border: 2px solid black;
}

.card-img-top {
  width: 100% !important;
  /* takes the 100 % width of its container (.box div)*/
  object-fit: contain;
}
<div class="card" style="width: 18rem;">
  <img src="https://i.sstatic.net/ToKWh.png" class="card-img-top" alt="Card image">
  <div class="card-body">
    <h5 class="card-title">Destiny 2</h5>
    <ul>
      <li>
        Developer: Bungie
      </li>
      <li>
        Genre: First-person shooter, MMOG
      </li>
      <li>
        Release Date: 2017
      </li>

    </ul>
    <a href="#" class="btn btn-warning">More</a>
    <a href="#" class="btn btn-success">Add to Favorites</a>
  </div>
</div>


<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="13717c7c67606761726353273d233d23">[email protected]</a>/dist/css/bootstrap.min.css">

htmlcssbootstrap-4

Answer №1

Ensure you are utilizing the latest version of Bootstrap for your project. If your image has a white border, it may not fit properly. Consider editing the photo or using one without a white border.

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 tab content doesn't consume the entire space

Utilizing bootstrap 4 with a left menu feature. Upon clicking an element, a tab is displayed. An ajax call is made to retrieve the thymeleaf fragment. The issue arises where the tab content does not occupy the entire space available. <div class="cont ...

twitter-bootstrapbootstrap-4

having trouble transferring the password field in PHP to phpMyAdmin

My HTML form collects the user's first name, last name, username, and password. I am trying to upload this data to my local phpMyAdmin, but I'm facing an issue with storing the password in the database. Below is my HTML code: <input type="te ...

javascriptphpcsshtmlphpmyadmin

Adjust input dimensions dynamically with Ajax

Currently, I am utilizing an input form to collect user input in the form of an OTP. This OTP can range from 4 digits, 5 digits, to 6 digits. The approach I have taken so far is functional but lacks dynamism. It necessitates a page refresh to display the d ...

jqueryhtmlajax

Library for HTML styling in JavaScript

Is there a reliable JavaScript library that can automatically format an HTML code string? I have a string variable containing unformatted HTML and I'm looking for a simple solution to beautify it with just one function call. I checked npmjs.com but co ...

javascripthtmlnpmpackage

What is the best way to include two class names within a single div using Next.js?

Struggling to include two different CSS classes into a single div element, I encountered some issues. For reference, here is a screenshot: https://i.stack.imgur.com/UuCBV.png https://i.stack.imgur.com/sHNwq.png My code snippet looks like this: blog.js ...

javascriptcssreactjsnext.js

"Setting up a filter for the first row in an Excel-like table using a pin header

Does anyone know how to create a table filter in Excel where the header and first row stay pinned while scrolling down, even after applying filters? Here is a JSFiddle demonstrating the issue: http://jsfiddle.net/6ng3bz5c/1/ I have attempted the followi ...

jquerycssangularjshtml-tablescroll

The merging of several XSL files

Hey there, I have two separate xsl files and an xml file. Is there a way to merge these xsl files into one transform type to create a single HTML output? The first xsl file is called index.html: <?xml version="1.0" encoding="ISO-8859-1"?> <!DOCT ...

htmlxmlxsltxslt-1.0

Guide to dynamically add data to two columns

I have a challenge with organizing multiple inputs into rows with two columns each, ensuring that each input is appended to the appropriate side (50% for each column unless there's an odd number of inputs). Currently, the inputs are being added to se ...

javascriptjqueryhtml

Position multiple div elements at the top with CSS alignment

Hey there! I have a question about the HTML and CSS code snippet below. I'm trying to align the text in the <h2> tags at the top for all three <div class="article-col-3"> containers, but it's currently aligned at the bottom. ...

css

How can the radio button's checked property be bound to a boolean attribute of a component in Angular 2?

Is there a way to connect the checked property of a radio button to a boolean variable in a Component class? I would like the radio button in the template to be pre-selected if the boolean flag is true. I attempted to use <input type="radio" [(ngModel) ...

javascripthtmlcsstypescriptangular

Is it possible to echo a CSS class using PHP?

I have a PHP structure and I would like to embed my div in PHP. I need to write CSS with echo class, but I am unsure of how to do it. Here is my div: <div class="mydiv"> <img src="catalog/view/theme/default/img/mypng.png" alt=""> </div ...

phpcss

Tips on Moving a Bootstrap Modal Popup with the Arrow Keys on Your Keyboard

This example showcases the integration of Bootstrap's Default Modal Popup with jQuery UI Draggable Function. The JS fiddle link provided below contains the code snippet. $(document).ready(function() { $("#btnTest").click(function() { $(&a ...

javascriptjqueryhtmltwitter-bootstrapbootstrap-modal

Footer sidebar of Material Dashboard 2 (free edition) from Innovative Schedule

I noticed in the demonstration of Creative Tim's Material Dashboard 2 (free version) that the sidebar footer takes up a significant amount of space, up to 360px tall. This causes some menu items to be hidden if the browser window is not tall enough. ...

css

What is the best way to automatically adjust the size of this HTML Menu to match the width of its

I am in the process of converting a Drupal 6 theme to Drupal 7 and I'm encountering some difficulties with this particular section. Below is the HTML code snippet: <ul id="nav" class=" scaling-active scaling-ready"> <li><a href="/demos ...

javascriptjqueryhtmlcssdrupal

Is there a way to create a JavaScript-driven search filter that updates automatically?

My website showcases a lineup of League of Legends champion icons, with one example shown below: <div class = "champion"> <p>Aatrox <img class = "face_left" src = "images/small/Aatrox.png"> <div class = "name" onmouseover="if(cha ...

javascriptjqueryhtmlcss

Ways to create a menu that appears as fixed-top without moving along with the scroll

When I use the fixed-top class on my nav bar, it stays on top of the header as shown in the image. However, when I scroll down, the menu also scrolls down. Is there a way to make the navigation look the same but not follow when scrolling? I want to achieve ...

htmlcssbootstrap-4

Looking to execute a jQuery function as soon as the input value matches?

Can anyone help me with this coding issue? I have a code that is supposed to display the #result div when the user enters "TV" into the input field, but I need the page to refresh after entering the text. Is there a way to do this live so that the div wi ...

javascriptjqueryhtml

Utilize jQuery to assign title attributes stored in one array to elements stored in another

In my project, I have twelve <span> elements with the class "has_title" and each one has a unique title. Also, there are twelve <div> elements with the class "bar". The task at hand is to assign the titles from the <span> elements in th ...

jqueryhtmlarrays

Review and add alt attributes to images that are missing them

I have a plan to create a Java tool that can evaluate HTML pages on an existing website. The goal is to add the alt="" attribute to any image that currently lacks it. One idea is to use an HTML parser, such as HtmlCleaner, to generate a DOM structure of th ...

javahtml

Tips on maintaining and storing values for every loop and filling HTML rows correspondingly

Our task is to store the value of each iteration and then load these values into corresponding HTML rows. The server will provide dynamic responses: (based on the key selected by the user) Key:"Apple" values:0:Array[2] 1:"500" 1: Array[2]0:""1:"765" "Key: ...

javascripthtmlangularjs