Trouble with Bootstrap card dimensions: Height and width not functioning correctly

I specified a height and width for all card images, but the heights are inconsistent with one being too large and another too small. I want each card to have the same height and width. How can I achieve this? Here is what I tried.

.card {
  height: 50%;
  width: 50%;
}

.card {
  background-color: #f8f9fa;
}

.card-body {
  padding: 15px;
}

.card-img-top {
  height: 200px;
  width: 100%;
  object-fit: cover;
}

.card .btn {
  background-color: #007bff;
  color: #fff;
}
https://i.sstatic.net/cTuGQ.jpg

The second image from the left has an excessively large height.

htmlcssbootstrap-4

Answer №1

The issue I'm facing is that the .card-img-top {height: 200px} declaration must be removed to reproduce it. It seems like it might be getting overruled on your website. I recommend checking the developer tools in your browser to investigate further.

Upon closer inspection, it seems that the width, background-color, and padding declarations are being overridden by the Bootstrap stylesheet in the code snippet provided. This could be due to the Bootstrap stylesheet being linked after the <style> declarations. A similar scenario on your webpage might be causing the issue you're experiencing.

I advise removing the .card {height: 50%} declaration as it causes content overflow. Here's the snippet where adjustments need to be made:

Answer №2

After reviewing your code, it appears to be functioning correctly. However, if you desire uniform height and width for all cards, you will need to include height:100%; in your CSS.

.card{
  height:100%
}

Simply adding this height rule to your card should ensure that your code executes as intended.

Answer №3

To ensure consistency in image sizes, apply the following css rules.

You can adjust the height based on your preference.

 .card img {
        width: 100%;
        height: 250px;
        object-fit: contain;
    }

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

Using JSON data to populate an HTML page

I'm currently working on a project that involves creating a "Twitter" page. The idea is to utilize the JSON file available at to display some of its content. However, I'm facing an issue where my page only shows the table headers and nothing els ...

javascriptjqueryhtmljson

What is the best way to implement a secondary sticky navbar that appears on scroll of a specific section, positioned below the primary fixed-top navbar, using jQuery and Bootstrap 5?

I am facing a challenge with my webpage layout. I have a fixed-top navbar at the top, followed by 3 sections. The second section contains nav-tabs. What I want is for the nav-tabs navbar to stick to the top of the page below the fixed-top navbar when the u ...

javascripthtmljquerycssbootstrap-5

Prevent Bootstrap 4 Select-Picker from automatically opening

I am currently using Bootstrap 4 along with the Bootstrap-select plugin, and I have two buttons set up: <div> <button id="disableButtonId">Disable selectpicker<button/> <button id="enableButtonId">Enable ...

jquerybootstrap-4bootstrap-selectbootstrap-selectpicker

Uncovering the specific file housing a CSS definition

I'm currently navigating a complex webpage with numerous CSS files that were not authored by me. I am struggling to identify a CSS style that seems elusive, as it is not located in the most obvious places (such as the CSS files) and I have no idea whe ...

htmlcss

What methods are available to modify HTML content using Node.js?

I am looking to modify the contents of my HTML file (index.html) below: <html> <body> <div id="greeting">Hello world</div> </body> </html> I want to change this using Node.js in the backend. Below is the Node.js cod ...

htmlnode.js

What steps can I take to embed a video in HTML without autoplaying in a browser?

I have a simple but important question that I need help with. I am creating a compilation of family videos and I want to put them all on one page or in an HTML file. However, when I embed/link a directory file of the video into the HTML, it automatically ...

html

Utilize the Appy Wordpress Widget in your designated widget region

This is my first time working with WordPress, and I am attempting to add a custom Widget to an HTML box. Here is the HTML: The blank News box Following some tutorials, I created a new Widget area inside my functions.php file using the following code: &l ...

phphtmlwordpresswidgetarea

Using jQuery to make an Ajax post request that will load the current page with additional form data appended to the

Below is the HTML code for my registration form: <form id="registerForm"> <input type="text" pattern="[A-Za-z]{1,20}" placeholder="First Name" name="guestFName" title="Up to 20 alphabetical characters" required> <inp ...

javascriptjqueryhtmlajax

Prevent redirection on buttons within ionic lists

THE ISSUE: I am facing an issue in my Ionic app where I am using the ion-list component. Each item in the list can be swiped to reveal a button (add/remove to favorites). Additionally, each item serves as a link to another page. The problem arises when ...

javascriptcssangularjsionic-framework

Tips for creating the X Mark using SVG and CSS

I'm struggling to create an animation of an "X" checkmark sign (for failure). Although I found a great example of an animated checkmark sign for success, the code uses a curve-bezier design that I can't replicate for the "X" sign. If anyone cou ...

htmlcsssvgwebfrontend

Using bootstrap with dompdf in a PDF document: a step-by-step guide

As I attempt to create a report with data from my database, I am facing an issue where the Bootstrap styling stops working when I try to render my HTML file. <?php // Here is my HTML code: ob_start(); ?> <!-- All of my content, including the lin ...

phpbootstrap-4bootstrap-5dompdf

The Divs pile one on top of the other

I am trying to position the second div below the first div instead of stacking on top of it and making the first div invisible. How can I achieve this? .shop { width: 100%; height: 1000px; background-color: #ffffff; position: relative; ...

htmlcss

Tips for positioning a solitary md-tab component to the right

Can a single md-tab element be aligned to the right of md-tabs while keeping the rest of the tabs in their original position? ------------------------------------------------------------------------- | Tab 1 | Tab 2 | Tab 3 | ...

cssangularjstabsangular-material

using javascript to create two choices

I am facing a small complication between two select options in my javascript code. Here is the snippet of my javascript: function displayVals() { var singleValues = $("select option:selected").text(); //to stay selected $("#hiddenselect").val(s ...

javascriptjqueryhtml

Having trouble with aligning text using the span tag?

I'm attempting to create a line for pricing where the text-align is aligned differently for each item - left, center, and right. Despite using text-align, I am unable to maintain all three items on the same line. Is there an alternative solution or w ...

htmlcss

Tips for updating input placeholder text using CSS

Is it possible to change the placeholder text of an input textbox using only CSS? Here's the HTML code snippet: <div class="col"> <input class="form-control" type="text" placeholder="" id="m ...

htmlcssplaceholder

The Media Query Menu is not aligned in the center for smaller screens, functioning in both medium and extra-small sizes

@import url('https://fonts.googleapis.com/css?family=Dosis'); * { box-sizing: border-box; } /*Xtra Small */ body { font-family: 'Dosis', sans-serif; line-height: 1.618em; font-size: 18px; background: #383231; c ...

cssresponsive-designmedia-queries

Collapse or display div elements with jQuery - First close all other elements before opening the selected item

The Problem at Hand Currently, the script is expected to hide all elements with the "gallery-collapse" class and reveal the specific content based on the clicked link. However, sometimes multiple divs might appear simultaneously when switching between ite ...

javascriptjqueryhtmlcss

Utilize the :not() selector in combination with the :first-child() selector

Currently, I am seeking a method to merge two css selectors together in order to target specific elements. The selectors I am attempting to combine are ':not' and ':first-of-type'. Here is the code snippet that represents my current sit ...

htmlcsscss-selectors

What is the solution to making text appear on the top rather than on the side?

Seeking a way to keep the text description above the textbox within a definition list, however currently the text appears to the left of the box. Here is the provided HTML structure: <dl> <dt> <label>Phone Number</label> &l ...

htmlcss