Centering images of varying sizes on Bootstrap cards

My task involves incorporating a list of organization logos and links inside cards using HTML code.

However, every time I add a logo, the card size changes in accordance with the logo's size, and the image is not centered within the card.

I attempted to use the class = mx-auto and class = card-block, but unfortunately, it did not yield the desired results.

<section class="site-section" id="section-blog">
                    <div class="container">
                        <div class="row mt-5 justify-content-center">
                            <div class="card card-custom mx-2 mb-3">
                                <a href="https://www.netflix.com/fr/">
                                    <img src="https://cdn1.iconfinder.com/data/icons/metro-ui-dock-icon-set--icons-by-dakirby/256/Netflix.png"
                                        alt="" class="mx-auto">
                                </a>
                            </div>
                            <div class="card card-custom mx-2 mb-3">
                                <a href="https://www.hulu.com">
                                    <img src="https://apprecs.com/ios-meta/app-icons/256/376510438.jpg" alt=""
                                        class="card-img">
                                </a>
                            </div>
                            <div class="card card-custom mx-2 mb-3">
                                <a href="https://www.netflix.com/fr/">
                                    <img src="https://cdn1.iconfinder.com/data/icons/metro-ui-dock-icon-set--icons-by-dakirby/256/Netflix.png"
                                        alt="" class="card-img">
                                </a>
                            </div>
                            <div class="card card-custom mx-2 mb-3">
                                <a href="https://www.hulu.com">
                                    <img src="https://apprecs.com/ios-meta/app-icons/256/376510438.jpg" alt=""
                                        class="card-img">
                                </a>
                            </div>
                            
                        </div>
                    </div>

                </section>

csstwitter-bootstrapbootstrap-4flexbox

Answer №1

After reviewing your code, I noticed that everything is functioning properly with one exception - the initial card element and its picture. It appears that the image should be assigned a class of card-img. Take a look at the JSFiddle demonstration. The problem might lie within the bootstrap URL you have included.

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

Positioning a div with a set size to the right while allowing a div with a variable width to the left

Even though I achieved the desired outcome in this example (http://jsfiddle.net/jcx3X/40/), I am intrigued by the reasons why this other scenario (http://jsfiddle.net/jcx3X/41/) does not work. What is the significance of the div being floated first in th ...

htmlcsswidth

Always keep your phone in landscape orientation for optimal website viewing

Currently, I am facing an issue with my website where it functions perfectly on mobile devices in landscape orientation but elements get distorted when viewed in portrait mode. Is there a method to ensure that the website is always displayed in landscape ...

javascriptjqueryhtmlcssviewport

CSS: the enigmatic padding of absolute positioning within a table cell

I am encountering an unusual issue while attempting to position a div element absolutely inside a table-cell. In order to achieve absolute positioning, I utilize a wrapper div element with position:relative: HTML <table> <colgroup> ...

htmlcss

What could be the reason my bootstrap cards are stacking vertically instead of being placed horizontally next to each other?

My Bootstrap cards are not aligning side by side and I'm having trouble locating the error in my code. I'm working with Django and HTML. {% extends 'base.html' %} <div> {% block content %} <h1>Team Members<h1& ...

htmldjangobootstrap-4

Tips for showcasing the individual product page in full width on woocommerce

Here is a link to the single product page: I am wondering if it's possible to extend the product summary drop-down menus all the way to the right without impacting the mobile site? Thank you. ...

phphtmlcsswordpresswoocommerce

a non-breaking space within a hyperlink

While working on the subnavigation of a website, I encountered an issue with the link Suite «Mont Blanc», which was pulled from the backend. The desired format for this link was:       Suite «Mont Blanc» However, t ...

htmlcsswhitespace

The issue of CSS and PHP header include file not adjusting to device size and exceeding the full width of the screen

This included code is a snippet from a header file for a website. <head> <link rel="shortcut icon" href="favicon.ico"> <meta charset="utf-8" /> <title>Test Site | Foo The Bar </title> <link rel="stylesheet" href="csss_stan ...

phpcssmobile

Show a grid layout featuring varying heights using HTML

I am trying to create a grid view for displaying images in an HTML document. I want each li tag to have a different height, but currently they are all the same height. Below is my HTML code: <div class="blog_main_midd_section"><ul> ...

htmlcssgridviewgallery

Guide to displaying Fontawsome icons with CSS2D Renderer/Object

I am trying to display the map-marker-exclamation icon from the FontAwsome library on top of a three.js cube, but unfortunately, the icon is not rendering properly. Can someone guide me on how to successfully render a FontAwsome Icon using three.js? Thank ...

cssthree.jsfont-awesome

Designing a unique CSS border for custom list item bullets

I'm currently exploring the possibility of implementing a CSS border around an image that I have imported as a custom bullet for my list items: ul { list-style: none; margin-right: 0; padding-left: 0; list-style-position: inside; } ul > ...

htmlcsshtml-listsborder

What is the best way to implement a required input field in Vue.js?

I need some assistance with my chat functionality. I want to prevent users from sending empty messages, so I want to make the input field required. Can you please help me with this? I have already tried adding "required='required'" to the input ...

javascripthtmlcsslaravelvue.js

Encountered a Webpack issue when trying to load the primeng.min

I recently initiated a fresh project using yo aspnetcore-spa. My goal is to integrate the PrimeNG component library. Upon installing font-awesome and primeng: npm install font-awesome primeng --save I included CSS in the webpack vendor list: vendor: [ ...

cssangularwebpackprimeng

Creating a see-through cursor resembling the one found on the App Store using CSS

Currently, I’m struggling a bit with understanding how to accomplish this task: The issue is that the pointer/arrow within the nav-element appears transparent and displays the content rather than its parent, which is the nav-element. Here is my HTML co ...

htmlcsstransparency

A guide to adjusting the size of an iframe within a bootstrap modal

I am currently facing an issue where I am trying to display an iframe inside a bootstrap modal. The challenge is that the content within the iframe is dynamic, so the size may vary each time the modal is opened. As seen here, the modal appears too big and ...

htmlbootstrap-4bootstrap-modal

FullCalendar fails to load in Bootstrap 4 tab

My current project involves utilizing Bootstrap 4 tabs, and I encountered an issue with displaying a FullCalendar on the second tab. Specifically, I am using version 5.2.0 of the FullCalendar library. While the calendar functions correctly when placed on t ...

javascripthtmlbootstrap-4

Highlighted top and bottom borders accenting a vertical list

I am working on a list that contains four items. Each item should have top and bottom borders set to 1px solid grey by default. There is a JavaScript rotator in place that adds a 'highlighted' class to the selected list element, which should have ...

jqueryhtmlcss

Error message displayed: "The timer function encountered an issue as second_input is found to be null."

var idinterval; var second_input_value = document.getElementById("Seconds"); var minute_input_value = document.getElementById("Minutes"); var second_val = second_input_value.value; var minute_val = minute_input_value.value; var total_time = parseInt(minut ...

javascripthtmlcsstimer

displaying a div upon checking the checkbox

How can I make a div push the content below it when it is in the show state? Currently, when I check the checkbox, the textarea covers the submit button, hiding it. Is there a way for the textarea to push the button down instead? You can find my code here: ...

jqueryhtmlcss

Setting the button name using setAttribute("name", "Button Name") is currently not possible

I have been working on adding a button to my webpage, but so far I haven't had much success. Every attempt either results in an error or the button not displaying any text (refer to the screenshot below). There should be a button labeled "BUTTON NAME" ...

htmlcssdom

In JavaScript, the addition and subtraction buttons may become disabled after nested lists are used

Recently, I embarked on a project to enhance the functionality of restaurant table items and implement value-saving features. Initially, everything worked smoothly with one item list. However, upon introducing a second list and attempting to manipulate it ...

javascripthtmlcsslistonclick