Default alerts

Add className="alert alert-primary|secondary|success|info|warning|danger" use one of the required className.


  <React.Fragment>
  {list.map((item, k) => (
    <React.Fragment key={k}>
      <Alert
        className=""
        variant={item.variant}
      >
        {" "}
         {item.text}
      </Alert>
    </React.Fragment>
  ))}
</React.Fragment>
Links in alerts

Add .alert-link className to quickly provide matching colored links within any alert


export const LinkAlert = () => {
  const [open, setOpen] = useState(false);
  const [list, setList] = useState(LinkAlertList);
  const handleRemove =(id)=> {
    const newList = list.filter((lit) =>  lit.id !== id);
    setList(newList);
  }
  return (
    <React.Fragment>
    {list.map((item, k) => (
      <React.Fragment key={k}>
        <Alert variant={item.variant}  className="alert-dismissible">
      <strong>{item.show}</strong> {item.text} <Alert.Link href="#!" className="alert-link">{item.text2}</Alert.Link>
      <span><i className="fe fe-x icon-dimiss" onClick={() => handleRemove(item.id)}></i></span>
    </Alert>
      </React.Fragment>
    ))}
    </React.Fragment>
  );
};
Alert with icon

Add .alert-icon className.


    export const LinkAlert = () => {
      const [open, setOpen] = useState(false);
      const [list, setList] = useState(LinkAlertList);
      const handleRemove =(id)=> {
        const newList = list.filter((lit) =>  lit.id !== id);
        setList(newList);
      }
      return (
        <React.Fragment>
        {list.map((item, k) => (
          <React.Fragment key={k}>
            <Alert variant={item.variant}  className="alert-dismissible">
          <strong>{item.show}</strong> {item.text} <Alert.Link href="#!" className="alert-link">{item.text2}</Alert.Link>
          <span><i className="fe fe-x icon-dimiss" onClick={() => handleRemove(item.id)}></i></span>
        </Alert>
          </React.Fragment>
        ))}
        </React.Fragment>
      );
    };
    
Alert with avatar

Add .alert-avatar className.


export const LinkAlert = () => {
  const [open, setOpen] = useState(false);
  const [list, setList] = useState(AvatarList);
  const handleRemove =(id)=> {
    const newList = list.filter((lit) =>  lit.id !== id);
    setList(newList);
  }
  return (
    <React.Fragment>
       {list.map((item, k) => (
            <React.Fragment key={k}>
          <Alert variant={item.variant} className={item.classname}>
      <img className="avatar brround cover-image" alt='' src={item.pic} /> Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      <span><i className="fe fe-x icon-dimiss" onClick={() => handleRemove(item.id)}></i></span>
    </Alert>
            </React.Fragment>
          ))}
      </React.Fragment>
  );
};
Alerts With Icons

Add .alert-avatar className.


export const LinkAlert = () => {
  const [open, setOpen] = useState(false);
  const [list, setList] = useState(AlertList);
  const handleRemove =(id)=> {
    const newList = list.filter((lit) =>  lit.id !== id);
    setList(newList);
  }
  return (
    <React.Fragment>
    {list.map((item, k) => (
    <React.Fragment key={k}>
    <Alert className={item.classname} variant={item.variant} >
    <span className="alert-inner--icon">{item.icon}</span>
    <span className="alert-inner--text"><strong>{item.show}</strong> This is a default alert—check it out!</span>
    <span><i className="fe fe-x icon-dimiss" onClick={() => handleRemove(item.id)}></i></span>
  </Alert>
      </React.Fragment>
    ))}
  </React.Fragment>
  );
};
Alerts With Icons Dismissing

Add .alert-dismissible className.


export const LinkAlert = () => {
  const [open, setOpen] = useState(false);
  const [list, setList] = useState(AlertList);
  const handleRemove =(id)=> {
    const newList = list.filter((lit) =>  lit.id !== id);
    setList(newList);
  }
  return (
    <React.Fragment>
    {list.map((item, k) => (
    <React.Fragment key={k}>
    <Alert className={item.classname} variant={item.variant} >
    <span className="alert-inner--icon">{item.icon}</span>
    <span className="alert-inner--text"><strong>{item.show}</strong> This is a default alert—check it out!</span>
    <span><i className="fe fe-x icon-dimiss" onClick={() => handleRemove(item.id)}></i></span>
  </Alert>
      </React.Fragment>
    ))}
  </React.Fragment>
  );
};
Alerts style

export const LinkAlert = () => {
  const [open, setOpen] = useState(false);
  const [list, setList] = useState(AlertList);
  const handleRemove =(id)=> {
    const newList = list.filter((lit) =>  lit.id !== id);
    setList(newList);
  }
  return (
    <React.Fragment>
    {list.map((item, k) => (
    <React.Fragment key={k}>
    <Alert key={item.id} variant={{item.color}} onClick={() => handleRemove(item.id)} show={show}>
    {item.icon}
    <strong>{item.Title}</strong>
    <span className="d-flex ms-auto" onClick={() => handleRemove(item.id)} ><i className={{item.color} fe fe-x ms-auto} ></i></span>
    <hr />
    <p>{item.description}</p>
  </Alert>
      </React.Fragment>
    ))}
  </React.Fragment>
  );
};