I am developing the frontend of my application using a combination of bootstrap, react, and nextjs. I attempted to implement the example provided by react-bootstrap at https://codesandbox.io/s/github/react-bootstrap/code-sandbox-examples/tree/master/basic. However, instead of achieving a result similar to this: https://i.stack.imgur.com/BIBWK.png, my outcome looks completely different: https://i.stack.imgur.com/DDEBN.png.
Here are some troubleshooting steps I have taken:
- Switching from the default bootstrap package to bootstrap@next
- Importing Bootstrap in both the index.jsx file and the example.jsx file
Below is the relevant code snippet:
Example.jsx - same as codesandbox.import 'bootstrap/dist/css/bootstrap.min.css'
import React, { useState } from 'react'
import Jumbotron from 'react-bootstrap/Jumbotron'
import Toast from 'react-bootstrap/Toast'
import Container from 'react-bootstrap/Container'
import Button from 'react-bootstrap/Button'
const ExampleToast = ({ children }) => {
const [show, toggleShow] = useState(true)
return (
<>
{!show && <Button onClick={() => toggleShow(true)}>Show Toast</Button>}
<Toast show={show} onClose={() => toggleShow(false)}>
<Toast.Header>
<strong className="mr-auto">React-Bootstrap</strong>
</Toast.Header>
<Toast.Body>{children}</Toast.Body>
</Toast>
</>
)
}
const App = () => (
<Container className="p-3">
<Jumbotron>
<h1 className="header">Welcome To React-Bootstrap</h1>
<ExampleToast>
We now have Toasts
<span role="img" aria-label="tada">
🎉
</span>
</ExampleToast>
</Jumbotron>
</Container>
)
export default App
index.jsx
function HomePage() {
return <div>Welcome to Next.js!</div>
}
export default HomePage
Output of npm list:
├── <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3052534249404470051e001e01">[email protected]</a>
├── <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d6b4b9b9a2a5a2a4b7a696e3f8e6f8e6fbb4b3a2b7e5">[email protected]</a>
├── <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cea8afbdbaa7a8b7e3ada1a1a5a7ab8efbe0fde0ff">[email protected]</a>
├── <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bed8dfcdcad7d8c793d4c9cafe8d908e908e">[email protected]</a>
├── <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b3d5d2c0c7dafb91bf90fd99dacad5cecd87cacb4dc94c8cacbcadfc4dfdffedfcccb88718381828586">[email protected]</a>
└── <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="aedcbacabbbebec3ecbabfbdb6acdadfc2ddccdedfa0cdc1d502cbc7c0">[email protected]</a>
UPDATE: When I include Bootstrap in index.jsx, none of the CSS seems to be applied.