Transforming card dimensions with Bootstrap

I am currently working on my web portfolio and I am looking to create a card format that includes an image thumbnail with text below it. However, I am facing an issue where I cannot control the size of the initial image, resulting in misaligned cards.

https://i.sstatic.net/sWFKH.png

Is there a way to fix this so that the card adjusts to any image size? Here is the code snippet:

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
        crossorigin="anonymous">
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css">
    <title>Pattern</title>
</head>

<body>

    <nav class="navbar bg-dark navbar-dark">
        <div class="container">
            <a href="" class="navbar-brand"> <i class="fas fa-code"></i> BODY OF WORK</a>
        </div>
    </nav>

    <section id="header" class="jumbotron text-center">
            <h1 class="display-3">FRANK DIN: WEB DEVELOPER</h1>
    </section>

    <section id="gallery">
        <div class="container">
            <div class="row">
                <div class="col-lg 4 mb-3">
                    <div class="card">
                        <a href=""><img class="card-img-top" src="https://github.com/frankdin1/LandingPage/blob/master/Landing%20Page%20thumbnail.PNG?raw=true"></a>
                        <div class="card-body">
                            <h5 class="card-title">Landing Page</h5>
                            <p class="card-text">Landing page for a fictitious dating site built with Bootstrap.</p>
                            <a href="https://github.com/frankdin1/LandingPage" class="btn btn-outline-primary">Github</a>
                            <a href="PurffectMatch.html" class="btn btn-outline-success">Webpage</a>
                        </div>
                    </div>
                </div>

                <div class="col-lg 4 mb-3">
                    <div class="card">
                        <a href=""><img class="card-img-top" src="https://github.com/frankdin1/Bootstrap-Image-Gallery/blob/master/BootstrapPhotoBlog%20thumbnail.PNG?raw=true"></a>
                        <div class="card-body">
                            <h5 class="card-title">Bootstrap Image Gallery</h5>
                            <p class="card-text">Image gallery built using Bootstrap.</p>
                            <a href="https://github.com/frankdin1/LandingPage" class="btn btn-outline-primary">Github</a>
                            <a href="PurffectMatch.html" class="btn btn-outline-success">Webpage</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
        crossorigin="anonymous"></script>
</body>

</html>
javascripthtmlcssbootstrap-4

Answer №1

Insert the following CSS code:

.card-img-top {
    height: 20vw; // Adjust this value and/or units to suit your needs
    width: 100%;
    object-fit: cover;
}

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

Having trouble with TypeScript error in React with Material-UI when trying to set up tabs?

I have developed my own custom accordion component hook, but I am encountering the following error export default const Tabs: OverridableComponent<TabsTypeMap<{}, ExtendButtonBase<ButtonBaseTypeMap<{}, "button">>>> Check ...

javascriptreactjstypescriptreact-hooksmaterial-ui

Double the Power of jQuery Live Search with Two Implementations on a Single Website

I recently implemented a JQuery Live Search feature that is working perfectly. Here is the JQuery script: <script type="text/javascript"> $(document).ready(function(){ $('.search-box input[type="text"]').on("keyup input", function(){ ...

javascriptjquerylivesearch

Generate Files Automatically through PHP Script

I am working on a project which requires the creation of files using the fwrite function in PHP. My goal is to ensure each file is unique and does not overwrite others. The project involves capturing text from a PHP form and saving it as an HTML file. I ...

phphtmlformsfwrite

Issue: Utilized more hooks than in the previous render cycle

After the initial load of a component that renders and makes data calls on the client side, everything works fine. However, when clicking a "see more" button to make another call, an error occurs in the console indicating that there are too many hooks be ...

javascriptreactjsreact-apollographql-js

How to implement scrollspy in Bootstrap 4 without relying on nav or list-group components?

Is it possible to implement scrollspy functionality without utilizing the nav or list-group elements? According to Bootstrap's documentation on scrollspy, it is typically restricted to use within nav or list group components. DOCUMENTATION How Scroll ...

htmlcssbootstrap-4scrollspy

Sequencing requests and processing data in Node.js through event handling

Is there a way to combine the responses from two requests into one single JSON response? The goal is to have an array containing both {response1JSON} and {response2JSON}, with each response streaming data that needs to be read. function getSongs() { c ...

javascriptnode.jshttppromise

What is the best way to apply the TableRow style in material-ui / mui to make it similar to TableHead?

Trying to implement TableHead styling on TableRow but encountering a warning: validateDOMNesting(...) cannot be a child of. How can this be fixed without triggering a warning message? CollapisbleTableRow.js import React, { Fragment, useCallback } from &ap ...

javascriptreactjsmaterial-uitablerowtablecell

Using Javascript to parse SOAP responses

Currently, I am working on a Meteor application that requires data consumption from both REST and SOAP APIs. The SOAP service is accessed using the soap package, which functions properly. However, I am facing challenges with the format of the returned data ...

javascriptnode.jstypescriptsoap

Incorporate row numbering feature into jQuery DataTables

Is there a way to have jQuery datatables generate a row number column in the first column, similar to a datagrid in VB? This is what I'm aiming for: If you have any insights on how this can be achieved, please share! ...

jqueryhtmldatatables

Is it possible for me to include a static HTML/Javascript/jQuery file in WordPress?

My extensive HTML file contains Javascript, jQuery, c3.js, style.css, and normalize.css. I am wondering if I can include this file as a static HTML page within Wordpress. Say, for instance, the file is called calculator.html, and I want it to be accessib ...

javascriptjqueryhtmlcsswordpress

Error: Material-UI X is unable to locate the data grid context

Utilizing the Data Grid Pro feature from Material-UI in my React application. I attempted to craft a personalized toolbar for the DataGridPro component by incorporating the GridToolbarColumnsButton, GridToolbarFilterButton, GridToolbarDensitySelector, and ...

javascriptreactjsdatagridmaterial-ui

Edit esri pop-up template

Can I customize the popupTemplate in Esri to match my design? I currently have a popupTemplate set up like this: popupTemplate: { content: [{ type: "fields", fieldInfos: [{ fieldName: "Name" ...

javascriptreactjsarcgisesri

Creating a single-level menu with Bootstrap using nested angular ng-repeat

I am currently working on developing a single level menu using bootstrap and angularJS. The menu is successfully functioning with JavaScript and HTML when the <li> element is dynamically created. Now, I am attempting to integrate AngularJS into the ...

htmltwitter-bootstrapangularjs

How can I retrieve information on a logged in Auth0 user from an API?

I'm currently working on a React application that utilizes auth0 in conjunction with an express API server. One issue I'm facing is how to access user information within the API when a secure endpoint is called. While I can retrieve user data on ...

javascriptreactjsexpressjwtauth0

What is the best way to ensure that my text always aligns perfectly to the end of the line?

I've been struggling to create a column layout where the text perfectly aligns with the end of the line, but so far, I haven't had any success. Despite my efforts to find a solution online, I have come up empty-handed. What I'm aiming for i ...

htmlcssbootstrap-4less

Angular's parent div height can be adjusted using CSS transitions

I have implemented a CSS transition to create a sliding effect in my pagination. However, I am facing an issue where the height of the containing div changes even when I set the position of the transitioned elements. Here is a snippet of my CSS: .slide { ...

javascriptcssangularjscss-transitions

Every time I try to launch NPM start, an error pops up on my screen

Whenever I try to execute the command: npm start An error message pops up saying: npm ERR! missing script: start This is what my package.json file looks like: { "name": "react-app", "version": "0.1.0", "private": true, "dependencies": { " ...

javascriptjsonreactjs

The Heroku Node.js application encountered an issue when trying to apply the style due to an incompatible MIME

As a complete beginner in Node.js and Express, I am encountering some errors from the console. When trying to load my CSS file from '', I receive the following error: "Refused to apply style because its MIME type ('text/html') i ...

javascriptnode.jsexpressheroku

Ensure that a DIV element stretches beyond the limits of its container

I am having an issue with a div that should overlap everything else as it functions as a menu. Despite trying various positioning tricks, the desired effect is not achieved. The div is only shown when hovering over a certain element. Here is the structure ...

css

Show all span elements in a map except for the last one

Within my ReactJS application, I have implemented a mapping function to iterate through an Object. In between each element generated from the mapping process, I am including a span containing a simple care symbol. The following code snippet demonstrates t ...

cssreactjstypescriptsass