유저가 사용하는 시스템에 대한 조작장치, 독립된 기능의 모듈
<style>
body {
padding: 3rem;
}
</style>
<!-- ALERTS -->
<div class="alert alert-primary">
Simple alert message.
</div>
<div class="alert alert-secondary">
Simple alert message.
</div>
<div class="alert alert-success">
Simple alert message.
</div>
<div class="alert alert-danger">
Simple alert message.
</div>
<div class="alert alert-warning">
Simple alert message.
</div>
<div class="alert alert-info">
Simple alert message.
</div>
<div class="alert alert-light">
Simple alert message.
</div>
<div class="alert alert-dark">
Simple alert message.
</div>
<!-- ALERT LINKS -->
<div class="alert alert-primary">
This is an alert <a href="#" class="alert-link">link.</a>
</div>
<div class="alert alert-secondary">
This is an alert <a href="#" class="alert-link">link.</a>
</div>
<div class="alert alert-success">
This is an alert <a href="#" class="alert-link">link.</a>
</div>
<!-- ALERT BOXS -->
<div class="alert alert-danger">
<h4 class="alert-heading">Alert Heading!</h4>
<hr>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam aliquam exercitationem pariatur modi ab nobis nesciunt nostrum eum assumenda? Dolores.</p>
</div>
<!-- ALERT WITH ICONS -->
<div class="alert alert-primary d-flex">
<svg width="24" class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path></svg>
<div class="ps-3">
An example alert with an icon.
</div>
</div>
<!-- ALERT DISMISSING -->
<div class="alert alert-warning alert-dismissible fade show">
This is alert DISMISSING.
<button class="btn-close" data-bs-dismiss="alert"></button>
</div>