Utilizing Bootstrap 4 cards in conjunction with a responsive next/image component

 <div className="row align-items-center justify-content-center">
    <div className="col-md-3 mt-3">
      <div className="card bg-light">
        <div className="card-img-top">
          <NextImage
            src="/character1.png"
            alt="Picture of the author"
            layout="fill"
          />
        </div>
        <div className="card-body">
          <h5 className="card-title">Emirhan Sirkeci</h5>
          <p className="text-muted">Developer</p>
          <div className="d-flex justify-content-center">
            <a href="https://github.com/justChargin" target="_blank">
              <Icon icon="akar-icons:github-fill" />
            </a>
            <a href="https://www.instagram.com/username/" target="_blank">
              <Icon icon="akar-icons:instagram-fill" />
            </a>
            <a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9efbf3f7ecf6fff0edf7ecf5fbfdf7a6def9f3fff7f2b0fdf1f3">[email protected]</a>" target="_blank">
              <Icon icon="cib:gmail" />
            </a>
          </div>
        </div>
      </div>
    </div>

I have implemented the NextImage component instead of a regular HTML element. However, I am encountering some responsive issues. Please refer to the screenshot below for more details.

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

It seems like the Image component is overlapping the card-body section. How can I adjust the positioning of the Image component to align with the rest of the content? I have tried setting fixed width and height properties for the Image component, but it affects its responsiveness. I have also experimented with width and height properties that include a "100%" value.

cssreactjsbootstrap-4next.js

Answer №1

The next/image component is currently being rendered inside a span with absolute position, causing it to overflow the card-body. To correct this, you can apply some CSS styles to the card-img-top class like shown in the example below:

.card-img-top {
  position: relative;
  height: 200px;
}

Alternatively, you can override certain CSS properties for the next/image HTML elements being rendered:

.card-img-top span,
.card-img-top span img {
  position: static !important;
}

.card-img-top span img {
  height: auto !important;
}

Check out this Stackblitz example for a visual demonstration.

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

What could be causing the issue with my customized sorting in the Material-UI Data Grid component?

After integrating Material-UI's Data Grid Component with my API's JSON array, I had to create a RenderCell function to handle text overflow and include a button that directs Users to a different page. Additionally, I utilized the ValueGetter for ...

jsonreactjstypescriptsortingmaterial-ui

The hover effect in CSS animations is turned up too high

Check out my Reddit news feed design: https://codepen.io/Teeke/pen/YxXXaE When hovering over articles, the headlines get displayed. But if the article text is too long, part of the headline may go off-screen. Instead of changing the line-height, I' ...

csssass

Guide on altering the cursor icon during an AJAX operation within a JQuery dialog

When I have a JQuery dialog open and make some $.ajax calls, why can't I change the cursor? I want to display a progress cursor while the code is processing so that users can see that the action is still ongoing. However, even though I update the CSS ...

jquerycssajaxcursor

Using an array of images with CSS and displaying them in HTML

Is there a way to use one class for 3 buttons, each with its own unique background image? I wanted to create an array of background images in CSS and then retrieve them individually for each button. However, after some research, it seems that CSS does not ...

htmlcss

Customizing color schemes of bootstrap buttons and dropdown-toggle elements

My button group looks like this: HTML <div class="btn-group"> <button type="button" class="btn btn-default btn-xs red-outline-button"> Sync </button> <button type="button" class="btn btn-default btn-xs gold-outline-button" da ...

htmlcsstwitter-bootstrap

Using CSS files that are not properly imported into React components

Currently, I am utilizing multiple CSS files for a specific purpose. The issue I am facing is that when I apply styles to one component in a CSS file, it inadvertently affects other components as well, not just the intended one. I believe the root of this ...

cssreactjsreact-routercreate-react-app

What is the best way to showcase my background image using html and css?

I've come across a similar topic addressing my problem, but I am still unable to resolve it. I am attempting to add a background image to my portfolio, but for some reason, it is not working. Can anyone offer any suggestions or ideas? Here is the cod ...

htmlcssbackground-image

Issues with Stripe Checkout Integration in Nextjs and Django Environment

Currently, I am working on creating a payment page in Next.js using Stripe. Following the guide works perfectly fine, but I am exploring an alternative approach. Instead of using a form to call the /create-checkout-session endpoint, I want to trigger this ...

reactjsdjangonext.jsstripe-paymentscheckout

Difficulty encountered in a Cast when using Router.put with mongoDB in a MERN application

Currently, I am trying to implement the router.put method for updating the Boolean value (isOn) in a toggle button. However, before making any changes, I decided to test it out and now I am encountering an issue. const express = require("express"); const ...

node.jsreactjsmongodbexpressaxios

Accessing Route Parameters from Any Component

If my URL follows this structure: /blog/[post_id]/something What's the best practice for passing $post_id to any component within the tree? I'm familiar with retrieving route parameters using getInitialProps, but I struggle with passing values ...

javascriptnode.jsreactjsnext.js

Styling the scroll bar within a fixed parent container's inner div with CSS

Check out the JSBIN link here: JSBIN The modules container has a fixed height of 100%. I am attempting to make the list items scroll while keeping the search div fixed within the wrapper container, ensuring that the search bar remains visible at all times ...

css

What is the process for appending a component to window.location.href?

I am working on implementing unique custom URLs for each item based on user interaction. After a user clicks "View Item", I want to redirect them to a URL that includes the item's name and ID, like this: "http://localhost:3000/item-1/-MC_xbIMm8zctEWRJ ...

reactjsmaterial-uireact-router-dom

Is there a way to dynamically update one input field while another input field is being modified? [HTML / JS]

I have a form with 3 input fields. One of the inputs is disabled, while the other two are enabled. The goal is to combine the values entered in the enabled fields to populate the disabled field. How can this be achieved? Is it possible for the value in th ...

javascripthtmljquerycss

Is there a way to incorporate text at the end of a row in HTML?

I have a photo and some text on my website. The photo is displayed on the left side, while the text appears nicely on the right side. Now, I am looking to include an additional block of text below the existing text. How can I accomplish this? What steps ...

javascriptcsshtml-table

Using next.js with SSG can lead to numerous fetch requests resulting in 404 errors for JSON files

Currently, I am utilizing SSG with Next.js and executing "next export" to generate static files in the /out folder. However, upon deployment of the application, I notice an influx of HTTP GET requests from router.js. https://i.stack.imgur.com/Gr6dU.png Th ...

next.js

What is the best way to create a sliding animation on a div that makes it disappear?

While I may not be an expert in animations, I have a question about sliding up the "gl_banner" div after a short delay and having the content below it move back to its original position. What CSS properties should I use for this animation? Should I use css ...

javascripthtmlcsscss-transitionscss-animations

Ensure that the footer remains at the bottom of the page without being fixed to the bottom

I am currently working on configuring the footer placement on pages of my website that contain the main body content class ".interior-health-main". My goal is to have a sticky footer positioned at the very bottom of these pages in order to eliminate any wh ...

javascriptjqueryhtmlcsstwitter-bootstrap-3

Automatically, the "ng-hide" class gets added despite using the correct syntax for ng-show

I am trying to dynamically show/hide a tr tag within a table based on the value of a scope variable in the controller. Despite writing the code correctly, I am facing an issue where the "ng-hide" class is automatically added to the tr tag every time it is ...

javascriptjqueryangularjshtmlcss

The function Router.push("/") is not functioning as expected when called within the pages/index.js file

Currently, I'm utilizing the Next JS next-auth/react library and aiming to direct authenticated users straight to the dashboard. Here's a snippet from my index.js file: import { useRouter } from "next/router"; import Link from "nex ...

javascriptreactjsnext.jsnext-authnext-router

Problem with 'com.android.support:support-v4' dependency

To integrate react-native-beacons-manager into my react-native project on PhpStorm, I followed the steps of installing the library with the command "yarn install react-native-beacons-manager" and then linking it to my project using the command "react-nativ ...

reactjsreact-native