React 18 for Beginners Module - 14 Exercise- showing alert an alert

Hi Mosh,
Happy to join your course, i am new for react started from beginner course for react 18, while i am creating an alert or a button it is not showing any background color just simple text is there.
i used “alert alert-secondary alert-dismissible” property so not seeing close button as well,
I have removed code from app.css and index.css also.
code from Alert.tsx

interface AlertProps {
  children: ReactNode;
  onClose: () => void;
const Alert = ({ children, onClose }: AlertProps) => {
  return (
    <div className="alert alert-secondary alert-dismissible">

code from App.tsx

import React, { useState } from "react";
import Alert from "./components/Alert";
import Button from "./components/Button";

function App() {
  const [alertVisible, setAlertVisibility] = useState(false);
  return (
      {alertVisible && (
        <Alert onClose={setAlertVisibility(false)}>My ALERT</Alert>

      <Button onClick={() => setAlertVisibility(true)} color="danger">
        My Button

export default App;

how should i debug this issue any hint or possible reason could save me here.
others help will also be appreciated.


Did you import bootstrap ok?

I have not started the react 18 courses yet but the classes that you reference are bootstrap related classes, I would make sure you have bootstrap referenced properly