bootstrap.native
Version:
Bootstrap components build with Typescript
44 lines (43 loc) • 2.19 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BSN Testing Page</title>
<link id="bsCSS" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="container" style="padding: 3rem">
<h3>Toast Example</h3>
<div class="btn-toolbar">
<button class="btn btn-outline-secondary me-1" data-bs-toggle="toast" data-bs-target="#liveToast1">Show Toast 1</button>
<a href="#liveToast2" class="btn btn-outline-secondary" data-bs-toggle="toast">Show Toast 2</a>
</div>
<div class="position-fixed top-0 end-0 p-3" style="z-index: 11">
<div id="liveToast1" class="toast mb-1 fade hide" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="true" data-bs-animation="true">
<div class="toast-header">
<svg class="bd-placeholder-img rounded me-2" width="20" height="20" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img">
<rect fill="#007aff" width="100%" height="100%"></rect>
</svg>
<strong class="me-auto">BSN</strong>
<small>11 mins ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
<div id="liveToast2" class="toast mb-1 fade hide" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="true" data-bs-animation="true">
<div class="toast-header">
<svg class="bd-placeholder-img rounded me-2" width="20" height="20" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img">
<rect fill="#007aff" width="100%" height="100%"></rect>
</svg>
<strong class="me-auto">BSN</strong>
<small>12 mins ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Hello, there! This is another toast message.
</div>
</div>
</div>
</body>
</html>