<divclass="alert alert-primary"role="alert">
A simple primary alert—check it out!
</div><divclass="alert alert-secondary"role="alert">
A simple secondary alert—check it out!
</div><divclass="alert alert-success"role="alert">
A simple success alert—check it out!
</div><divclass="alert alert-danger"role="alert">
A simple danger alert—check it out!
</div><divclass="alert alert-warning"role="alert">
A simple warning alert—check it out!
</div><divclass="alert alert-info"role="alert">
A simple info alert—check it out!
</div><divclass="alert alert-light"role="alert">
A simple light alert—check it out!
</div><divclass="alert alert-dark"role="alert">
A simple dark alert—check it out!
</div>
Alertas com botão
Está gostando da OneBitCode? (Aqui o bootstrap fornece o JavaScript)
<divid="liveAlertPlaceholder">Está gostando da OneBitCode? (Aqui o bootstrap fornece o JavaScript)</div><buttontype="button"class="btn btn-primary"id="liveAlertBtn">Sim!</button>
Parte do JS ⬇️
var alertPlaceholder = document.getElementById('liveAlertPlaceholder')
var alertTrigger = document.getElementById('liveAlertBtn')
functionalert(message, type) {
var wrapper = document.createElement('div')
wrapper.innerHTML = '<div class="alert alert-' + type + ' alert-dismissible" role="alert">' + message + '<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button></div>'
alertPlaceholder.append(wrapper)
}
if (alertTrigger) {
alertTrigger.addEventListener('click', function () {
alert('Muito bom programador, você vai ter muito sucesso na carreira!', 'success')
})
}
Holy guacamole! You should check in on some of those fields below.
<divclass="alert alert-warning alert-dismissible fade show"role="alert"><strong>Holy guacamole!</strong> You should check in on some of those fields below.
<buttontype="button"class="btn-close"data-bs-dismiss="alert"aria-label="Close"></button></div>