import React, { useState } from
"react"
;
import { Alert, Toast, Button,
} from
"react-bootstrap"
;
import
"bootstrap/dist/css/bootstrap.min.css"
;
const App = () => {
const [alert, set_Alert] = useState(
false
);
const [toast, set_Toast] = useState(
false
);
const showAlertFunction = () => { set_Alert(
true
);
setTimeout(() => {
set_Alert(
false
)}, 3000)}
const showToastFunction = () => {
set_Toast(
true
);
setTimeout(() => {
set_Toast(
false
)}, 3000)};
const customAlertStyle = {
position:
"absolute"
,
top:
"20px"
,
left:
"50%"
,
transform:
"translateX(-50%)"
,
width:
"80%"
,
maxWidth:
"400px"
,
animation:`slide-
in
-alert
0.5s ease-
in
-out
forwards, bounce-alert
0.5s ease-
in
-out 0.5s`,
background:
"linear-gradient(45deg, #FFD700, #FF6347)"
,
color:
"white"
,
borderRadius:
"10px"
,
boxShadow:
"0 0 10px rgba(0, 0, 0, 0.2)"
,
zIndex: 999,
};
const customToastStyle = {
position:
"absolute"
,
top:
"20px"
,
right:
"20px"
,
width:
"200px"
,
animation:`slide-
in
-toast 0.5s
ease-
in
-out forwards,
rotate-toast 0.5s ease-
in
-out 0.5s`,
background:
"linear-gradient(135deg, #00BFFF, #FF6347)"
,
color:
"white"
,
borderRadius:
"10px"
,
boxShadow:
"0 0 10px rgba(0, 0, 0, 0.3)"
,
zIndex: 999,
};
return
(
<div style={{ marginTop:
"30px"
,
color:
"green"
,
fontWeight:
"bold"
,}}>
<h1 style={{ color:
"green"
,
fontWeight:
"bold"
,}}>
GeeksforGeeks
</h1>
<h3 style={{ fontSize:
"18px"
,}}>
Custom Styling to Bootstrap
Components - Example 2
</h3>
<div style={{ marginTop:
"20px"
,
display:
"flex"
,
gap:
"20px"
,}}>
<Button variant=
"primary"
onClick={showAlertFunction}>
Show Alert
</Button>
<Button variant=
"success"
onClick={showToastFunction}>
Show Toast
</Button>
</div>
{alert && (
<Alert variant=
"danger"
onClose={() =>set_Alert(
false
)}
dismissible
style={customAlertStyle}>
Alert
with
GeeksforGeeks Text
</Alert>)}
{toast && (
<Toast
onClose={() =>set_Toast(
false
)}
style={customToastStyle}>
<Toast.Header closeButton={
false
}>
<strong style={{marginRight:
"auto"
,}}>
Toast Notification
</strong>
</Toast.Header>
<Toast.Body>
Article Submitted Successfully!
</Toast.Body>
</Toast>)}
</div>
)};
export
default
App;