The dimensions of Bootstrap 4.0 card images vary

I am facing a challenge in achieving uniform image sizes for my bootstrap 4 cards. The images themselves vary in size.

<div class="container">
    <div class="row">

    </div>

    <!-- card 2-->
    <div class="col-md-6 col-lg-3">
        <div class="card">
            <img src="img/boot.png" alt="bootstrap" class="card-img-top " 
            style="width: 100%; height: 100%;">
            <div class="card-block">
                <h3 class="card-title"> Projects </h3>
                <p>hello world hello worldhello worldhello worldhello worldhello world</p>
            </div>
        </div>
    </div>

    <!-- card 3-->
    <div class="col-md-6 col-lg-3">
        <div class="card">
            <img src="img/css.png" alt="HTML" class="card-img-top ">
            <div class="card-block">
                <h3 class="card-title"> Projects </h3>
                <p> hello world hello worldhello worldhello worldhello worldhello world</p>
            </div>
        </div>
    </div>
</div>

The code is consistent for the images, but the variation in image sizes is preventing the cards from being of equal dimensions. How can I address this issue and ensure uniformity in card sizes despite different image sizes?

Answer №1

The card-img-top class ensures the images expand to fit the full size within the card design. As long as all cards have the same width, there should be no display issues, especially if you adhere to the markup structure outlined in Bootstrap documentation.

By using images of varying sizes, you can observe that all card images still appear uniform. This example may provide some insight into your layout concerns.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="d-flex">
  <div class="card" style="width: 18rem;">
    <img src="https://via.placeholder.com/150" class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      <a href="#" class="btn btn-primary">Go somewhere</a>
    </div>
  </div>


  <div class="card" style="width: 18rem;">
    <img src="https://via.placeholder.com/100" class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      <a href="#" class="btn btn-primary">Go somewhere</a>
    </div>
  </div>

  <div class="card" style="width: 18rem;">
    <img src="https://via.placeholder.com/250" class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      <a href="#" class="btn btn-primary">Go somewhere</a>
    </div>
  </div>
</div>

In the following example utilizing your provided code, I ensured that the columns are wrapped within a .row div as required by Bootstrap standards. Additionally, avoid using the style attribute to modify styles applied by classes.

I'm not familiar with the card-block element mentioned; however, Bootstrap includes the .card-body class for holding card content.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />

<div class="row">
  <div class="col-md-6 col-lg-3">
    <div class="card">
      <img src="https://via.placeholder.com/100" alt="bootstrap" class="card-img-top ">
      <div class="card-block">
        <h3 class="card-title"> Projects </h3>
        <p> hello world hello worldhello worldhello worldhello worldhello world
        </p>
      </div>
    </div>
  </div>

  <!-- card 3-->
  <div class="col-md-6 col-lg-3">
    <div class="card">
      <img src="https://via.placeholder.com/150" alt="HTML" class="card-img-top ">
      <div class="card-block">
        <h3 class="card-title"> Projects </h3>
        <p> hello world hello worldhello worldhello worldhello worldhello world
        </p>
      </div>
    </div>
  </div>
</div>

</div>

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

Display a pop-up modal once the Http.get() function is executed

Currently, I'm invoking a function to obtain a response from an Http.get() request. This is my data retrieval function: getCharacterDetail(characterId: number) { return this.http.get(this.characterDetailApiUrl + characterId) .subscribe(r ...

How to align Vimeo embed to the left side

Is there a way to align a Vimeo iFrame to the left instead of it automatically centering itself? I want more control over its alignment within my flexbox container. I've created a Flexbox container named .example-div with two internal flex containers ...

Is there a way to create rectangles with a designated percentage of blue color using CSS or Bootstrap 3?

There's an image on my laptop that perfectly illustrates what I mean, but unfortunately, I'm not sure how to share it with you. In essence, I am looking to create a rectangle filled with a specific percentage of the color blue. Could you assist m ...

Guide to highlighting input field text using Angular

I've set up an angular page that includes an input field within its template. My goal is to highlight the text in the input field when a specific function is triggered. When I refer to "highlighting the text," I mean (check out the image below) https ...

What could be causing the whitespace around this element when using SASS from Refills / Bourbon.io?

I've recently started using the impressive SASS framework, Boubon.io created by the talented team at thoughtbot. As I experiment with their supplied templates (known as Refills), I'm finding that Bourbon.io serves as a versatile alternative to po ...

Increasing the size of iframe in a Flexbox layout

I'm facing a challenge in making the iframe element stretch to occupy the remaining space within my web application. While I have ensured that the maximum space is allocated for the div by setting a border, the iframe's height does not automatica ...

Tips for modifying the color of the last anchor in a list item

li elements are utilized to create breadcrumb in a shopping cart. The breadcrumb displays all anchor elements using the style defined for an 'a' element from site.css. How can I make the last anchor's color black? I attempted the style belo ...

The layout causes issues with responsiveness on the Flask app page

I'm currently in the process of developing a web application and I've implemented a navbar.html file as the layout for each page using the following code: eachpage.html : {% extends 'navbar.html' %} {% block body %} <div class=" ...

Switch on and activate a button using AngularJS

I have a set of four buttons that I want to toggle and activate upon clicking them. Currently, the buttons toggle when double-clicked. My desired solution is for the button current btn to be highlighted and display data when clicked, and for the previous ...

BootstrapSASS: Incorrect amount of arguments (3 instead of 2) for the `table-row-variant' function

After recently upgrading to Angular 8, I've encountered a persistent issue that I can't seem to resolve. Here is the specific error message: ERROR in ./src/vendor/styles/bootstrap-material.scss (./node_modules/@angular-devkit/build-angular/src/ ...

Is there a way to adjust the positioning of this dialog element?

I'm having trouble repositioning and resizing a dialog box. I attempted to use the style tag, but it didn't have any effect. I want to permanently move it to a specific location. The dialog box always opens in the same position, but I need to ch ...

What are the steps to make a vertical navigation bar that stays fixed in place

Take a look at this example: . They have their shipping methods displayed vertically on both sides of the page. To achieve this effect, I used the following CSS: .vertical{ transform: rotate(90deg); transform-origin: left top 0; position: fixed; } ...

Node.js Link Management: A Guide to Updating Links

For some time now, I've been attempting to update the tabs on my navigation bar (including the links) when a user logs in. The issue arises on the index page, where users can access it both when logged in and not logged in. In my navigation bar, all t ...

Changing the language of the bootstrap datetimepicker (not just the datepicker)

tag, I am utilizing the most recent version of Bootstrap (4.2.1) in conjunction with the latest version of jQuery. Moreover, I have also integrated moment.js and jquery.datetimepicker into my project. Despite adding a locale file for language support, I ...

I'm running into an issue where I am unable to retrieve a variable from a separate

Struggling to populate a dropdown menu as I keep encountering an undefined error for all currencies when trying to reference them. A third party provided me with this code to simply fill the dropdown and make some text edits, but I'm puzzled as to wh ...

Changing between two images using HTML and CSS

I am currently designing a WordPress theme and I would like to create an effect where two different thumbnail images switch on hover. The code that I have come up with so far looks something like this : <a class="thumb" href="posturl"> <img src= ...

How can I assign an attribute to an element that has been dynamically generated?

Upon receiving a response from a $.post, I found that it contains various elements including <a> and <img>. To prevent the <a> element from performing its default actions when clicked, and to disable the draggable option for both the < ...

Having trouble with loading the generated HTML from a PHP file? If loadHTMLFile is not working, here's what you

Currently, I am facing an issue in obtaining the generated HTML from my index.php page. My goal is to convert an HTML table that was created using PHP into a CSV file. The main challenge I am encountering lies in capturing my HTML table within a PHP varia ...

Transform a button into an AngularJS directive

Is there a way to create a custom directive in HTML to represent a button? For example: <buy-button></buy-button> Here is the code that I would like to change: <md-button class="md-cornered" ng-disabled="0>=gains" ...

What causes the translation of text within HTML tags to occur when attempting to retrieve it during Web Scraping?

Exploring the world of web scraping, I am currently immersed in a small project. In this snippet of code, I am capturing the HTML content and storing it in a variable named soup. source=requests.get(URL) soup=BeautifulSoup(source.text,'html.parser&apo ...