Bootstrap 4 Tutorial

BS4 Alerts

Last modified on: October 26, 2024

<h1>Bootstrap 4 Alerts</h1>
<p>Bootstrap 4 provides an easy way to display various types of alerts on your website, perfect for notifying users of important information, warnings, or success messages. Alerts are customizable, dismissible, and responsive, making them an essential part of any modern web application.</p>
<h2>Key Features of Bootstrap 4 Alerts</h2>
<ol>
<li>
<p><strong>Pre-defined Styles</strong>: Bootstrap provides alerts in different color schemes, each suitable for various contexts (success, warning, danger, etc.).</p>
</li>
<li>
<p><strong>Dismissible Alerts</strong>: Alerts can be made dismissible by adding a close button.</p>
</li>
<li>
<p><strong>Flexible Content</strong>: You can add headings, links, and other content within alerts.</p>
</li>
<li>
<p><strong>Responsive</strong>: Alerts automatically adjust based on screen size.</p>
</li>
</ol>
<h2>Basic Alert Structure</h2>
<p>The basic syntax for an alert in Bootstrap 4:</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;div class="alert alert-[type]" role="alert"&gt;
    Your message here!
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<p>Replace <code>[type]</code> with the appropriate alert type: <code>primary</code>, <code>secondary</code>, <code>success</code>, <code>danger</code>, <code>warning</code>, <code>info</code>, <code>light</code>, or <code>dark</code>.</p>
<h2>Examples of Bootstrap 4 Alerts</h2>
<h3>1. Simple Alert</h3>
<p>Here's a simple alert with a message:</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;div class="alert alert-primary" role="alert"&gt;
    This is a primary alert&mdash;check it out!
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h3>2. Alert Types</h3>
<p>Bootstrap 4 offers various alert types for different contexts. Here&rsquo;s a list of alerts with all types:</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;div class="alert alert-success" role="alert"&gt;
    Success! Your operation was completed successfully.
&lt;/div&gt;
&lt;div class="alert alert-danger" role="alert"&gt;
    Danger! Something went wrong with your request.
&lt;/div&gt;
&lt;div class="alert alert-warning" role="alert"&gt;
    Warning! Please double-check your input.
&lt;/div&gt;
&lt;div class="alert alert-info" role="alert"&gt;
    Info! Here is some important information.
&lt;/div&gt;
&lt;div class="alert alert-light" role="alert"&gt;
    Light alert for neutral messages.
&lt;/div&gt;
&lt;div class="alert alert-dark" role="alert"&gt;
    Dark alert for subtle notifications.
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h3>3. Dismissible Alert</h3>
<p>Make alerts dismissible by adding the <code>.alert-dismissible</code> and a close button:</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;div class="alert alert-warning alert-dismissible fade show" role="alert"&gt;
    &lt;strong&gt;Warning!&lt;/strong&gt; Check your input.
    &lt;button type="button" class="close" data-dismiss="alert" aria-label="Close"&gt;
        &lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;
    &lt;/button&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h3>4. Alert with Links</h3>
<p>You can add links to alerts by using <code>&lt;a&gt;</code> tags with the <code>.alert-link</code> class:</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;div class="alert alert-info" role="alert"&gt;
    For more details, &lt;a href="#" class="alert-link"&gt;click here&lt;/a&gt;.
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h3>5. Alert with Additional Content</h3>
<p>Add headings and additional text within the alert for more structured messages:</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;div class="alert alert-success" role="alert"&gt;
    &lt;h4 class="alert-heading"&gt;Well done!&lt;/h4&gt;
    &lt;p&gt;You successfully read this important alert message.&lt;/p&gt;
    &lt;hr&gt;
    &lt;p class="mb-0"&gt;Remember to keep this information in mind.&lt;/p&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h3>6. Custom Styling with Alerts</h3>
<p>Use additional utility classes to further style alerts:</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;div class="alert alert-danger text-center font-weight-bold" role="alert"&gt;
    Centered and bold danger alert!
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h3>7. Complete Example: Alerts in a Bootstrap 4 Page</h3>
<p>Here&rsquo;s a complete example of a Bootstrap 4 page featuring various alert types:</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;Bootstrap 4 Alerts Example&lt;/title&gt;
    &lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;div class="container mt-5"&gt;
        &lt;h1&gt;Bootstrap 4 Alerts&lt;/h1&gt;

&lt;!-- Success Alert --&gt;
        &lt;div class="alert alert-success" role="alert"&gt;
            &lt;strong&gt;Success!&lt;/strong&gt; Your operation was successful.
        &lt;/div&gt;

&lt;!-- Dismissible Alert --&gt;
        &lt;div class="alert alert-warning alert-dismissible fade show" role="alert"&gt;
            &lt;strong&gt;Warning!&lt;/strong&gt; Please review your information.
            &lt;button type="button" class="close" data-dismiss="alert" aria-label="Close"&gt;
                &lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;
            &lt;/button&gt;
        &lt;/div&gt;

&lt;!-- Alert with Additional Content --&gt;
        &lt;div class="alert alert-info" role="alert"&gt;
            &lt;h4 class="alert-heading"&gt;Heads up!&lt;/h4&gt;
            &lt;p&gt;This is an info alert with a headline and extra content.&lt;/p&gt;
            &lt;hr&gt;
            &lt;p class="mb-0"&gt;Keep this in mind for future reference.&lt;/p&gt;
        &lt;/div&gt;
    &lt;/div&gt;

&lt;script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h3>&nbsp;</h3>

Web Technology View More