Expecting React-Bootstrap to operate with Badge and Stack function.
https://react-bootstrap.netlify.app/docs/components/badge/#contextual-variations
- React-Bootstrap is installed with correct version 2.10.2 in package-lock.json
npm install react-bootstrap bootstrap
- Everything else renders as expected, including the bootstrap syntax within classNames
import React from 'react';
import Badge from 'react-bootstrap/Badge';
import Stack from 'react-bootstrap/Stack'; // Bug: currently not working,
// expecting to render a horizontal stack of badges, instead it renders plain text.
// It apppears React-Bootstrap is not displaying, with no error messages.
const PersonalProjects = () => {
return (
<section className="personal-projects container mx-auto px-auto">
<h2 className="text-center text-white text-xl font-bold mb-3 mt-5">Personal Projects</h2>
<div className="grid sm:grid-cols-1 md:grid-cols-2 gap-4">
{Array.from({ length: 5 }).map((_, index) => (
<div key={index} className="bg-white shadow-md rounded-lg p-4">
<h3 className="text-lg font-semibold mb-2">Project {index + 1}</h3>
[...]
<Stack direction="horizontal" gap={2}>
<Badge pill bg="primary">Html</Badge>
<Badge pill bg="secondary">React</Badge>
<Badge pill bg="success">Django</Badge>
</Stack>
</div>
))}
</div>
</section>
);
};
export default PersonalProjects;
devtools inspection
The page source renders the Stack/Badge Components with correct class, hoever there appears to be no badge class in ‘styles’.
<div class="hstack gap-2">
<span class="badge rounded-pill bg-primary">Html</span>
<span class="badge rounded-pill bg-secondary">React</span>
<span class="badge rounded-pill bg-success">Django</span>
</div>
There should certainly be an external css file apparent.
Likely problem areas include:
.nextstaticcssapplayout.css
is present with many expected bootstrap renderings, but not including the badge- the stylesheet is not linked properly. My file structure does not have an index.html where I can paste it into.
this was a beginner-friendly issue to solve:
adding import 'bootstrap/dist/css/bootstrap.min.css';
to the page.tsx appears to correct the issue.
at first it didn’t work, so there was an additional step – deleting the .next folder enabled to refresh the cache. In terminal enter: rm .next