Bootstrap Class not working properly on next.js <Image> element #26303
Labels
please add a complete reproduction
Please add a complete reproduction.
Comments
|
The following example is working for me. pages/_app.jsimport '../styles/globals.css'
import 'bootstrap/dist/css/bootstrap.min.css';
function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}
export default MyApppages/index.jsimport Head from 'next/head'
import Image from 'next/image'
import styles from '../styles/Home.module.css'
export default function Home() {
return (
<div className={styles.container}>
<Head>
<title>Create Next App</title>
<meta name="description" content="Generated by create next app" />
<link rel="icon" href="/favicon.ico" />
</Head>
<main className={styles.main}>
<h1 className={styles.title}>
Welcome to <a href="https://nextjs.org">Next.js!</a>
</h1>
{/*all 4 corners are round*/}
<Image className="rounded" alt="hacker" src="https://media.giphy.com/media/YQitE4YNQNahy/giphy.gif" width={480} height={270} />
<p className={styles.description}>
Get started by editing{' '}
<code className={styles.code}>pages/index.js</code>
</p>
<div className={styles.grid}>
<a href="https://nextjs.org/docs" className={styles.card}>
<h2>Documentation →</h2>
<p>Find in-depth information about Next.js features and API.</p>
</a>
<a href="https://nextjs.org/learn" className={styles.card}>
<h2>Learn →</h2>
<p>Learn about Next.js in an interactive course with quizzes!</p>
</a>
<a
href="https://github.com/vercel/next.js/tree/master/examples"
className={styles.card}
>
<h2>Examples →</h2>
<p>Discover and deploy boilerplate example Next.js projects.</p>
</a>
<a
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
className={styles.card}
>
<h2>Deploy →</h2>
<p>
Instantly deploy your Next.js site to a public URL with Vercel.
</p>
</a>
</div>
</main>
<footer className={styles.footer}>
<a
href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
Powered by{' '}
<span className={styles.logo}>
<Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
</span>
</a>
</footer>
</div>
)
}next.config.jsmodule.exports = {
reactStrictMode: true,
images: {
domains: ['media.giphy.com'],
},
} |
balazsorban44
added
please add a complete reproduction
|
This issue has been automatically closed after 30 days of inactivity with no reproduction. If you are running into a similar issue, please open a new issue with a reproduction. Thank you. |
|
This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you. |
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
What version of Next.js are you using?
latest
What version of Node.js are you using?
14.16.1
What browser are you using?
Chrome version 91.0.4472.106
What operating system are you using?
Windows 10 , version 10.0.18362
How are you deploying your application?
currently running only in development mode locally
Describe the Bug
Bootstrap Class not working properly on next.js Image element
Expected Behavior
I am using Bootstrap 4.6 with my Next.js project.
When I apply className="rounded" (where 'rounded' is the bootstrap class) to the Image component imported from 'next/image' , I should see all the four corners of the image rounded. However , only the top-left corner is rounded.
To Reproduce
Install bootstrap 4.6 .
Apply the 'rounded' class to some next.js Image component .
The text was updated successfully, but these errors were encountered: