ମୁଖ୍ୟ ବିଷୟବସ୍ତୁକୁ ଯାଆନ୍ତୁ | ଡକସ୍ ନେଭିଗେସନ୍ କୁ ଯାଆନ୍ତୁ |
Check
in English

ସତର୍କତା

ହାତଗଣତି ଉପଲବ୍ଧ ଏବଂ ନମନୀୟ ଆଲର୍ଟ ବାର୍ତ୍ତା ସହିତ ସାଧାରଣ ଉପଭୋକ୍ତା କାର୍ଯ୍ୟ ପାଇଁ ପ୍ରସଙ୍ଗଗତ ମତାମତ ବାର୍ତ୍ତା ପ୍ରଦାନ କରନ୍ତୁ |

ଏହି ପୃଷ୍ଠାରେ |

ଉଦାହରଣଗୁଡିକ

ଯେକ any ଣସି ଲମ୍ବା ପାଠ୍ୟ ପାଇଁ ଆଲର୍ଟ ଉପଲବ୍ଧ, ଏବଂ ଏକ ଇଚ୍ଛାଧୀନ ବନ୍ଦ ବଟନ୍ | ସଠିକ୍ ଶ yl ଳୀ ପାଇଁ, ଆଠଟି ଆବଶ୍ୟକୀୟ ପ୍ରସଙ୍ଗ ଶ୍ରେଣୀ ମଧ୍ୟରୁ ଗୋଟିଏ ବ୍ୟବହାର କରନ୍ତୁ (ଯଥା, .alert-success) | ଇନଲାଇନ୍ ବରଖାସ୍ତ ପାଇଁ, ଜାଭାସ୍କ୍ରିପ୍ଟ ପ୍ଲଗଇନ୍ ଆଲର୍ଟ ବ୍ୟବହାର କରନ୍ତୁ |

html 
<div class="alert alert-primary" role="alert">
  A simple primary alert—check it out!
</div>
<div class="alert alert-secondary" role="alert">
  A simple secondary alert—check it out!
</div>
<div class="alert alert-success" role="alert">
  A simple success alert—check it out!
</div>
<div class="alert alert-danger" role="alert">
  A simple danger alert—check it out!
</div>
<div class="alert alert-warning" role="alert">
  A simple warning alert—check it out!
</div>
<div class="alert alert-info" role="alert">
  A simple info alert—check it out!
</div>
<div class="alert alert-light" role="alert">
  A simple light alert—check it out!
</div>
<div class="alert alert-dark" role="alert">
  A simple dark alert—check it out!
</div>
ସହାୟକ ପ୍ରଯୁକ୍ତିବିଦ୍ୟା ପାଇଁ ଅର୍ଥ ପହଞ୍ଚାଇବା |

ଅର୍ଥ ଯୋଡିବା ପାଇଁ ରଙ୍ଗ ବ୍ୟବହାର କରିବା କେବଳ ଏକ ଭିଜୁଆଲ୍ ସୂଚକ ପ୍ରଦାନ କରିଥାଏ, ଯାହା ସହାୟକ ପ୍ରଯୁକ୍ତିବିଦ୍ୟାର ଉପଭୋକ୍ତାମାନଙ୍କୁ ପ୍ରଦାନ କରାଯିବ ନାହିଁ - ଯେପରିକି ସ୍କ୍ରିନ୍ ରିଡର୍ | ନିଶ୍ଚିତ କରନ୍ତୁ ଯେ ରଙ୍ଗ ଦ୍ୱାରା ସୂଚିତ ସୂଚନା ବିଷୟବସ୍ତୁରୁ ନିଜେ ସ୍ପଷ୍ଟ ହୋଇଛି (ଉଦାହରଣ ସ୍ୱରୂପ ଦୃଶ୍ୟମାନ ପାଠ୍ୟ), କିମ୍ବା ବିକଳ୍ପ ମାଧ୍ୟମ ମାଧ୍ୟମରେ ଅନ୍ତର୍ଭୂକ୍ତ ହୋଇଛି, ଯେପରିକି .visually-hiddenଶ୍ରେଣୀ ସହିତ ଲୁକ୍କାୟିତ ଅତିରିକ୍ତ ପାଠ୍ୟ |

ଜୀବନ୍ତ ଉଦାହରଣ |

ଏକ ଆଲର୍ଟ ଦେଖାଇବାକୁ ନିମ୍ନରେ ବଟନ୍ କ୍ଲିକ୍ କରନ୍ତୁ (ଆରମ୍ଭ କରିବାକୁ ଇନଲାଇନ ଶ yles ଳୀ ସହିତ ଲୁକ୍କାୟିତ), ତାପରେ ବିଲ୍ଟ-ଇନ୍ କ୍ଲୋଜ୍ ବଟନ୍ ସହିତ ଏହାକୁ ଖାରଜ କରନ୍ତୁ (ଏବଂ ନଷ୍ଟ କରନ୍ତୁ) |

html 
<div id="liveAlertPlaceholder"></div>
<button type="button" class="btn btn-primary" id="liveAlertBtn">Show live alert</button>

ଆମର ଲାଇଭ୍ ଆଲର୍ଟ ଡେମୋ ଟ୍ରିଗର କରିବାକୁ ଆମେ ନିମ୍ନଲିଖିତ ଜାଭାସ୍କ୍ରିପ୍ଟ ବ୍ୟବହାର କରୁ:

const alertPlaceholder = document.getElementById('liveAlertPlaceholder')

const alert = (message, type) => {
  const wrapper = document.createElement('div')
  wrapper.innerHTML = [
    `<div class="alert alert-${type} alert-dismissible" role="alert">`,
    `   <div>${message}</div>`,
    '   <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>',
    '</div>'
  ].join('')

  alertPlaceholder.append(wrapper)
}

const alertTrigger = document.getElementById('liveAlertBtn')
if (alertTrigger) {
  alertTrigger.addEventListener('click', () => {
    alert('Nice, you triggered this alert message!', 'success')
  })
}

.alert-linkଯେକ any ଣସି ଆଲର୍ଟ ମଧ୍ୟରେ ଶୀଘ୍ର ମେଳୁଥିବା ରଙ୍ଗୀନ ଲିଙ୍କ୍ ପ୍ରଦାନ କରିବାକୁ ୟୁଟିଲିଟି କ୍ଲାସ୍ ବ୍ୟବହାର କରନ୍ତୁ |

html 
<div class="alert alert-primary" role="alert">
  A simple primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-secondary" role="alert">
  A simple secondary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-success" role="alert">
  A simple success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-danger" role="alert">
  A simple danger alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-warning" role="alert">
  A simple warning alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-info" role="alert">
  A simple info alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-light" role="alert">
  A simple light alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-dark" role="alert">
  A simple dark alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>

ଅତିରିକ୍ତ ବିଷୟବସ୍ତୁ |

ଆଲର୍ଟଗୁଡିକ ହେଡିଙ୍ଗ୍, ପାରାଗ୍ରାଫ୍ ଏବଂ ଡିଭାଇଡର୍ ପରି ଅତିରିକ୍ତ HTML ଉପାଦାନ ଧାରଣ କରିପାରେ |

html 
<div class="alert alert-success" role="alert">
  <h4 class="alert-heading">Well done!</h4>
  <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
  <hr>
  <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
</div>

ଚିତ୍ରସଂକେତ

ସେହିଭଳି, ଆଇକନ୍ ସହିତ ଆଲର୍ଟ ସୃଷ୍ଟି କରିବାକୁ ଆପଣ ଫ୍ଲେକ୍ସବକ୍ସ ୟୁଟିଲିଟି ଏବଂ ବୁଟଷ୍ଟ୍ରାପ୍ ଆଇକନ୍ ବ୍ୟବହାର କରିପାରିବେ | ଆପଣଙ୍କର ଆଇକନ୍ ଏବଂ ବିଷୟବସ୍ତୁ ଉପରେ ନିର୍ଭର କରି, ଆପଣ ଅଧିକ ଉପଯୋଗୀତା କିମ୍ବା କଷ୍ଟମ୍ ଶ yles ଳୀ ଯୋଡିବାକୁ ଚାହିଁପାରନ୍ତି |

html 
<div class="alert alert-primary d-flex align-items-center" role="alert">
  <svg xmlns="http://www.w3.org/2000/svg" class="bi bi-exclamation-triangle-fill flex-shrink-0 me-2" viewBox="0 0 16 16" role="img" aria-label="Warning:">
    <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
  </svg>
  <div>
    An example alert with an icon
  </div>
</div>

ଆପଣଙ୍କର ଆଲର୍ଟ ପାଇଁ ଏକରୁ ଅଧିକ ଆଇକନ୍ ଆବଶ୍ୟକ କରନ୍ତି କି? ଅଧିକ ବୁଟଷ୍ଟ୍ରାପ୍ ଆଇକନ୍ ବ୍ୟବହାର କରିବା ଏବଂ ସମାନ ଆଇକନ୍ଗୁଡ଼ିକୁ ବାରମ୍ବାର ରେଫରେନ୍ସ କରିବା ପାଇଁ ଏକ ସ୍ଥାନୀୟ SVG ସ୍ପ୍ରିଟ୍ ତିଆରି କରିବାକୁ ଚିନ୍ତା କର |

html 
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
  <symbol id="check-circle-fill" viewBox="0 0 16 16">
    <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
  </symbol>
  <symbol id="info-fill" viewBox="0 0 16 16">
    <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/>
  </symbol>
  <symbol id="exclamation-triangle-fill" viewBox="0 0 16 16">
    <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
  </symbol>
</svg>

<div class="alert alert-primary d-flex align-items-center" role="alert">
  <svg class="bi flex-shrink-0 me-2" role="img" aria-label="Info:"><use xlink:href="#info-fill"/></svg>
  <div>
    An example alert with an icon
  </div>
</div>
<div class="alert alert-success d-flex align-items-center" role="alert">
  <svg class="bi flex-shrink-0 me-2" role="img" aria-label="Success:"><use xlink:href="#check-circle-fill"/></svg>
  <div>
    An example success alert with an icon
  </div>
</div>
<div class="alert alert-warning d-flex align-items-center" role="alert">
  <svg class="bi flex-shrink-0 me-2" role="img" aria-label="Warning:"><use xlink:href="#exclamation-triangle-fill"/></svg>
  <div>
    An example warning alert with an icon
  </div>
</div>
<div class="alert alert-danger d-flex align-items-center" role="alert">
  <svg class="bi flex-shrink-0 me-2" role="img" aria-label="Danger:"><use xlink:href="#exclamation-triangle-fill"/></svg>
  <div>
    An example danger alert with an icon
  </div>
</div>

ବରଖାସ୍ତ

ଆଲର୍ଟ ଜାଭାସ୍କ୍ରିପ୍ଟ ପ୍ଲଗଇନ୍ ବ୍ୟବହାର କରି ଯେକ any ଣସି ଆଲର୍ଟ ଇନଲାଇନକୁ ବରଖାସ୍ତ କରିବା ସମ୍ଭବ ଅଟେ | ଏଠାରେ କିପରି ଅଛି:

  • ନିଶ୍ଚିତ ହୁଅନ୍ତୁ ଯେ ଆପଣ ଆଲର୍ଟ ପ୍ଲଗଇନ୍, କିମ୍ବା ସଙ୍କଳିତ ବୁଟଷ୍ଟ୍ରାପ୍ ଜାଭାସ୍କ୍ରିପ୍ଟ ଲୋଡ୍ କରିଛନ୍ତି |
  • ଏକ କ୍ଲୋଜ୍ ବଟନ୍ ଏବଂ କ୍ଲାସ୍ ଯୋଡନ୍ତୁ .alert-dismissible, ଯାହା ଆଲର୍ଟର ଡାହାଣକୁ ଅତିରିକ୍ତ ପ୍ୟାଡିଂ ଯୋଗ କରେ ଏବଂ କ୍ଲୋଜ ବଟନ୍ କୁ ସ୍ଥାନିତ କରେ |
  • କ୍ଲୋଜ୍ ବଟନ୍ ରେ, data-bs-dismiss="alert"ଆଟ୍ରିବ୍ୟୁଟ୍ ଯୋଡନ୍ତୁ, ଯାହା ଜାଭାସ୍କ୍ରିପ୍ଟ କାର୍ଯ୍ୟକାରିତାକୁ ଟ୍ରିଗର କରିଥାଏ | <button>ସମସ୍ତ ଡିଭାଇସରେ ସଠିକ୍ ଆଚରଣ ପାଇଁ ଏହା ସହିତ ଉପାଦାନ ବ୍ୟବହାର କରିବାକୁ ନିଶ୍ଚିତ ହୁଅନ୍ତୁ |
  • .fadeସେମାନଙ୍କୁ ବରଖାସ୍ତ କରିବା ସମୟରେ ଆଲର୍ଟ ଆନିମେସନ୍ କରିବାକୁ, ଏବଂ .showକ୍ଲାସ୍ ଯୋଡିବାକୁ ନିଶ୍ଚିତ ହୁଅନ୍ତୁ |

ଆପଣ ଏହାକୁ ଏକ ଲାଇଭ୍ ଡେମୋ ସହିତ କାର୍ଯ୍ୟରେ ଦେଖିପାରିବେ:

html 
<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>Holy guacamole!</strong> You should check in on some of those fields below.
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
ଯେତେବେଳେ ଏକ ଆଲର୍ଟ ଖାରଜ ହୁଏ, ପୃଷ୍ଠା ସଂରଚନାରୁ ଉପାଦାନଟି ସମ୍ପୂର୍ଣ୍ଣ ରୂପେ ଅପସାରିତ ହୁଏ | ଯଦି କୀବୋର୍ଡ୍ ବ୍ୟବହାରକାରୀ ବନ୍ଦ ବଟନ୍ ବ୍ୟବହାର କରି ଆଲର୍ଟକୁ ଖାରଜ କରନ୍ତି, ତେବେ ସେମାନଙ୍କର ଧ୍ୟାନ ହଠାତ୍ ହଜିଯିବ ଏବଂ ବ୍ରାଉଜର ଉପରେ ନିର୍ଭର କରି ପୃଷ୍ଠା / ଡକ୍ୟୁମେଣ୍ଟ ଆରମ୍ଭରେ ପୁନ et ସେଟ୍ ହେବ | ଏହି କାରଣରୁ, ଆମେ ଅତିରିକ୍ତ ଜାଭାସ୍କ୍ରିପ୍ଟ ଅନ୍ତର୍ଭୂକ୍ତ କରିବାକୁ ସୁପାରିଶ କରୁ ଯାହା closed.bs.alertଇଭେଣ୍ଟ ପାଇଁ ଶୁଣେ ଏବଂ ପ୍ରୋଗ୍ରାମେଟିକ୍ focus()ଭାବରେ ପୃଷ୍ଠାର ସବୁଠାରୁ ଉପଯୁକ୍ତ ସ୍ଥାନକୁ ସେଟ୍ କରେ | ଯଦି ଆପଣ ଧ୍ୟାନକୁ ଏକ ଅଣ-ଇଣ୍ଟରାକ୍ଟିଭ୍ ଉପାଦାନକୁ ସ୍ଥାନାନ୍ତର କରିବାକୁ ଯୋଜନା କରୁଛନ୍ତି ଯାହା ସାଧାରଣତ focus ଫୋକସ୍ ଗ୍ରହଣ କରେ ନାହିଁ, tabindex="-1"ଉପାଦାନରେ ଯୋଡିବାକୁ ନିଶ୍ଚିତ କରନ୍ତୁ |

CSS

ଭେରିଏବଲ୍ |

V5.2.0 ରେ ଯୋଡା ଯାଇଛି |

ବୁଟଷ୍ଟ୍ରାପର ବିକାଶଶୀଳ CSS ଭେରିଏବଲ୍ ପଦ୍ଧତିର ଏକ ଅଂଶ ଭାବରେ, ଆଲର୍ଟ ବର୍ତ୍ତମାନ .alertବର୍ଦ୍ଧିତ ରିଅଲ୍ ଟାଇମ୍ କଷ୍ଟମାଇଜେସନ୍ ପାଇଁ ସ୍ଥାନୀୟ CSS ଭେରିଏବଲ୍ ବ୍ୟବହାର କରେ | CSS ଭେରିଏବଲ୍ ପାଇଁ ମୂଲ୍ୟଗୁଡ଼ିକ ସାସ୍ ମାଧ୍ୟମରେ ସେଟ୍ ହୋଇଛି, ତେଣୁ ସାସ୍ କଷ୍ଟୋମାଇଜେସନ୍ ମଧ୍ୟ ସମର୍ଥିତ |

  --#{$prefix}alert-bg: transparent;
  --#{$prefix}alert-padding-x: #{$alert-padding-x};
  --#{$prefix}alert-padding-y: #{$alert-padding-y};
  --#{$prefix}alert-margin-bottom: #{$alert-margin-bottom};
  --#{$prefix}alert-color: inherit;
  --#{$prefix}alert-border-color: transparent;
  --#{$prefix}alert-border: #{$alert-border-width} solid var(--#{$prefix}alert-border-color);
  --#{$prefix}alert-border-radius: #{$alert-border-radius};

ସାସ୍ ଭେରିଏବଲ୍ |

$alert-padding-y:               $spacer;
$alert-padding-x:               $spacer;
$alert-margin-bottom:           1rem;
$alert-border-radius:           $border-radius;
$alert-link-font-weight:        $font-weight-bold;
$alert-border-width:            $border-width;
$alert-bg-scale:                -80%;
$alert-border-scale:            -70%;
$alert-color-scale:             40%;
$alert-dismissible-padding-r:   $alert-padding-x * 3; // 3x covers width of x plus default padding on either side

ସାସ୍ ମିଶ୍ରଣ |

$theme-colorsଆମର ଆଲର୍ଟ ପାଇଁ ପ୍ରସଙ୍ଗଗତ ମୋଡିଫାୟର୍ କ୍ଲାସ୍ ସୃଷ୍ଟି କରିବାକୁ ମିଳିତ ଭାବରେ ବ୍ୟବହୃତ ହୁଏ |

@mixin alert-variant($background, $border, $color) {
  --#{$prefix}alert-color: #{$color};
  --#{$prefix}alert-bg: #{$background};
  --#{$prefix}alert-border-color: #{$border};

  @if $enable-gradients {
    background-image: var(--#{$prefix}gradient);
  }

  .alert-link {
    color: shade-color($color, 20%);
  }
}

ସାସ୍ ଲୁପ୍ |

ଲୁପ୍ ଯାହା ମିକ୍ସିନ ସହିତ ମୋଡିଫାୟର୍ କ୍ଲାସ୍ ସୃଷ୍ଟି କରେ alert-variant()|

// Generate contextual modifier classes for colorizing the alert.

@each $state, $value in $theme-colors {
  $alert-background: shift-color($value, $alert-bg-scale);
  $alert-border: shift-color($value, $alert-border-scale);
  $alert-color: shift-color($value, $alert-color-scale);

  @if (contrast-ratio($alert-background, $alert-color) < $min-contrast-ratio) {
    $alert-color: mix($value, color-contrast($alert-background), abs($alert-color-scale));
  }
  .alert-#{$state} {
    @include alert-variant($alert-background, $alert-border, $alert-color);
  }
}

ଜାଭାସ୍କ୍ରିପ୍ଟ ଆଚରଣ |

ଆରମ୍ଭ କର |

ଉପାଦାନଗୁଡ଼ିକୁ ଆଲର୍ଟ ଭାବରେ ଆରମ୍ଭ କରନ୍ତୁ |

const alertList = document.querySelectorAll('.alert')
const alerts = [...alertList].map(element => new bootstrap.Alert(element))

ଏକ ଆଲର୍ଟକୁ ଖାରଜ କରିବାର ଏକମାତ୍ର ଉଦ୍ଦେଶ୍ୟ ପାଇଁ, JS API ମାଧ୍ୟମରେ ଉପାଦାନକୁ ହସ୍ତକୃତ ଭାବରେ ଆରମ୍ଭ କରିବା ଆବଶ୍ୟକ ନୁହେଁ | ବ୍ୟବହାର କରି data-bs-dismiss="alert", ଉପାଦାନଟି ସ୍ୱୟଂଚାଳିତ ଭାବରେ ଆରମ୍ଭ ହେବ ଏବଂ ସଠିକ୍ ଭାବରେ ବରଖାସ୍ତ ହେବ |

ଅଧିକ ବିବରଣୀ ପାଇଁ ଟ୍ରିଗର ବିଭାଗ ଦେଖନ୍ତୁ |

ଟ୍ରିଗର୍ସ |

ନିମ୍ନରେ ପ୍ରଦର୍ଶିତ ପରି ଆଲର୍ଟ ମଧ୍ୟରେ ଥିବାdata ଏକ ବଟନ୍ ଉପରେ ଥିବା ଗୁଣ ସହିତ ବହିଷ୍କାର ହାସଲ କରାଯାଇପାରିବ :

<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>

କିମ୍ବା ନିମ୍ନରେ ପ୍ରଦର୍ଶିତ ପରି ବ୍ୟବହାର କରି ଆଲର୍ଟ ବାହାରେ ଏକ ବଟନ୍ ଉପରେ data-bs-target:

<button type="button" class="btn-close" data-bs-dismiss="alert" data-bs-target="#my-alert" aria-label="Close"></button>

ଧ୍ୟାନ ଦିଅନ୍ତୁ ଯେ ଏକ ଆଲର୍ଟ ବନ୍ଦ କରିବା ଏହାକୁ DOM ରୁ ଅପସାରଣ କରିବ |

ପ୍ରଣାଳୀ

ଆପଣ ଆଲର୍ଟ କନଷ୍ଟ୍ରକ୍ଟର ସହିତ ଏକ ଆଲର୍ଟ ଉଦାହରଣ ସୃଷ୍ଟି କରିପାରିବେ, ଉଦାହରଣ ସ୍ୱରୂପ:

const bsAlert = new bootstrap.Alert('#myAlert')

ବଂଶଧର ଉପାଦାନଗୁଡ଼ିକ ଉପରେ କ୍ଲିକ୍ ଇଭେଣ୍ଟଗୁଡିକ ପାଇଁ ଏହା ଏକ ଆଲର୍ଟ ଶୁଣେ ଯାହାର data-bs-dismiss="alert"ଗୁଣ ଅଛି | (ଡାଟା-ଆପିର ଅଟୋ-ପ୍ରାରମ୍ଭିକରଣ ବ୍ୟବହାର କରିବା ସମୟରେ ଆବଶ୍ୟକ ନୁହେଁ |)

ପଦ୍ଧତି ବର୍ଣ୍ଣନା
close ଏହାକୁ DOM ରୁ ହଟାଇ ଏକ ଆଲର୍ଟ ବନ୍ଦ କରେ | ଯଦି ଉପାଦାନରେ .fadeଏବଂ .showଶ୍ରେଣୀଗୁଡିକ ଉପସ୍ଥିତ ଥାଏ, ତେବେ ଏହାକୁ ହଟାଇବା ପୂର୍ବରୁ ସତର୍କତା ଦୂର ହୋଇଯିବ |
dispose ଏକ ଉପାଦାନର ସତର୍କତା ନଷ୍ଟ କରେ | (DOM ଉପାଦାନରେ ଗଚ୍ଛିତ ତଥ୍ୟ ଅପସାରଣ କରେ)
getInstance ଷ୍ଟାଟିକ୍ ପଦ୍ଧତି ଯାହା ଆପଣଙ୍କୁ ଏକ DOM ଉପାଦାନ ସହିତ ଜଡିତ ଆଲର୍ଟ ଇନଷ୍ଟାଣ୍ଟ ପାଇବାକୁ ଅନୁମତି ଦିଏ | ଉଦାହରଣ ସ୍ୱରୂପ : bootstrap.Alert.getInstance(alert)।
getOrCreateInstance ଷ୍ଟାଟିକ୍ ପଦ୍ଧତି ଯାହା ଏକ DOM ଉପାଦାନ ସହିତ ଜଡିତ ଏକ ସତର୍କ ଦୃଷ୍ଟାନ୍ତ ଫେରସ୍ତ କରେ କିମ୍ବା ଏହା ପ୍ରାରମ୍ଭ ହୋଇନଥିଲେ ଏକ ନୂତନ ସୃଷ୍ଟି କରେ | ଆପଣ ଏହାକୁ ଏହିପରି ବ୍ୟବହାର କରିପାରିବେ : bootstrap.Alert.getOrCreateInstance(element)।

ମ Basic ଳିକ ବ୍ୟବହାର:

const alert = bootstrap.Alert.getOrCreateInstance('#myAlert')
alert.close()

ଘଟଣା

ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ ର ଆଲର୍ଟ ପ୍ଲଗଇନ୍ ଆଲର୍ଟ କାର୍ଯ୍ୟକାରିତା ପାଇଁ ହୁକିଙ୍ଗ୍ ପାଇଁ କିଛି ଘଟଣାକୁ ପ୍ରକାଶ କରିଥାଏ |

ଘଟଣା ବର୍ଣ୍ଣନା
close.bs.alert closeଉଦାହରଣ ପଦ୍ଧତି କୁହାଯିବା ପରେ ତୁରନ୍ତ ଅଗ୍ନିକାଣ୍ଡ ହୁଏ |
closed.bs.alert ଯେତେବେଳେ ଆଲର୍ଟ ବନ୍ଦ ହୋଇଗଲା ଏବଂ CSS ସ୍ଥାନାନ୍ତରଣ ସମାପ୍ତ ହେଲା ସେତେବେଳେ ଫାୟାର୍ | 
const myAlert = document.getElementById('myAlert')
myAlert.addEventListener('closed.bs.alert', event => {
  // do something, for instance, explicitly move focus to the most appropriate element,
  // so it doesn't get lost/reset to the start of the page
  // document.getElementById('...').focus()
})