<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	
	xmlns:georss="http://www.georss.org/georss"
	xmlns:geo="http://www.w3.org/2003/01/geo/wgs84_pos#"
	>

<channel>
	<title>Alerts Archives - CopyCat Blog</title>
	<atom:link href="https://www.copycat.dev/blog/tag/alerts/feed/" rel="self" type="application/rss+xml" />
	<link>https://www.copycat.dev/blog/tag/alerts/</link>
	<description>Perfect the art of copying code</description>
	<lastBuildDate>Tue, 14 Feb 2023 11:11:25 +0000</lastBuildDate>
	<language>en-US</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.7.1</generator>

<image>
	<url>https://www.copycat.dev/blog/wp-content/uploads/2022/04/cropped-cat-4x-32x32.png</url>
	<title>Alerts Archives - CopyCat Blog</title>
	<link>https://www.copycat.dev/blog/tag/alerts/</link>
	<width>32</width>
	<height>32</height>
</image> 
<site xmlns="com-wordpress:feed-additions:1">213178576</site>	<item>
		<title>How to Get Started with Bootstrap Alert</title>
		<link>https://www.copycat.dev/blog/bootstrap-alert/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=bootstrap-alert</link>
					<comments>https://www.copycat.dev/blog/bootstrap-alert/#respond</comments>
		
		<dc:creator><![CDATA[Uncle Big Bay]]></dc:creator>
		<pubDate>Tue, 20 Dec 2022 17:48:56 +0000</pubDate>
				<category><![CDATA[React.js]]></category>
		<category><![CDATA[Alerts]]></category>
		<category><![CDATA[Bootstrap]]></category>
		<category><![CDATA[Bootstrap Alert]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[React]]></category>
		<category><![CDATA[react.js]]></category>
		<guid isPermaLink="false">https://www.copycat.dev/blog/?p=2606</guid>

					<description><![CDATA[<p>Table of Contents IntroductionOverviewWhat is Bootstrap Alert?Setting Up BootstrapCreating alerts in BootstrapTypes of Bootstrap AlertsAlert Alert-success TypeAlert Alert-info TypeAlert Alert-warning TypeAlert Alert-danger TypeHow do I make bootstrap alerts automatically disappear?Styling Bootstrap AlertsClosing Alerts via Data AttributesBootstrap Alert ExamplesAdd icons to Bootstrap AlertsAdditional Content Inside Bootstrap AlertsAdding Link in Bootstrap AlertMatching Links Color inside AlertsWrapping UpInteresting [&#8230;]</p>
<p>The post <a rel="nofollow" href="https://www.copycat.dev/blog/bootstrap-alert/">How to Get Started with Bootstrap Alert</a> appeared first on <a rel="nofollow" href="https://www.copycat.dev/blog">CopyCat Blog</a>.</p>
]]></description>
										<content:encoded><![CDATA[<div class="convertful-189269"></div>



<div id="rtoc-mokuji-wrapper" class="rtoc-mokuji-content frame3 preset2 animation-fade rtoc_open noto-sans" data-id="2606" data-theme="CopyCat Theme">
			<div id="rtoc-mokuji-title" class=" rtoc_left">
			<button class="rtoc_open_close rtoc_open"></button>
			<span>Table of Contents</span>
			</div><ol class="rtoc-mokuji decimal_ol level-1"><li class="rtoc-item"><a href="#rtoc-1">Introduction</a></li><li class="rtoc-item"><a href="#rtoc-2">Overview</a></li><li class="rtoc-item"><a href="#rtoc-3">What is Bootstrap Alert?</a></li><li class="rtoc-item"><a href="#rtoc-4">Setting Up Bootstrap</a></li><li class="rtoc-item"><a href="#rtoc-5">Creating alerts in Bootstrap</a></li><li class="rtoc-item"><a href="#rtoc-6">Types of Bootstrap Alerts</a><ul class="rtoc-mokuji mokuji_ul level-2"><li class="rtoc-item"><a href="#rtoc-7">Alert Alert-success Type</a></li><li class="rtoc-item"><a href="#rtoc-8">Alert Alert-info Type</a></li><li class="rtoc-item"><a href="#rtoc-9">Alert Alert-warning Type</a></li><li class="rtoc-item"><a href="#rtoc-10">Alert Alert-danger Type</a></li><li class="rtoc-item"><a href="#rtoc-11">How do I make bootstrap alerts automatically disappear?</a></li></ul></li><li class="rtoc-item"><a href="#rtoc-12">Styling Bootstrap Alerts</a></li><li class="rtoc-item"><a href="#rtoc-13">Closing Alerts via Data Attributes</a></li><li class="rtoc-item"><a href="#rtoc-14">Bootstrap Alert Examples</a></li><li class="rtoc-item"><a href="#rtoc-15">Add icons to Bootstrap Alerts</a></li><li class="rtoc-item"><a href="#rtoc-16">Additional Content Inside Bootstrap Alerts</a></li><li class="rtoc-item"><a href="#rtoc-17">Adding Link in Bootstrap Alert</a></li><li class="rtoc-item"><a href="#rtoc-18">Matching Links Color inside Alerts</a></li><li class="rtoc-item"><a href="#rtoc-19">Wrapping Up</a><ul class="rtoc-mokuji mokuji_ul level-2"><li class="rtoc-item"><a href="#rtoc-20"><strong>Interesting Reads From Our Blogs</strong></a></li></ul></li></ol></div><h2 id="rtoc-1"  class="wp-block-heading">Introduction</h2>



<p>Bootstrap is one of the most popular CSS (Cascading Style Sheet) frameworks for developing responsive websites. Bootstrap helps to design and customize mobile-first websites quickly.</p>



<p>The package includes various free tools that enable designers to create both more responsive and more common website interface elements, increasing the framework&#8217;s adaptability.</p>



<p>The latest version of Bootstrap as of the time of writing this article is <a target="_blank" rel="noreferrer noopener" href="https://getbootstrap.com/docs/5.0/getting-started/introduction/">Bootstrap v5.0</a>.</p>



<p>If you want to increase your productivity, try CopyCat, an AI that can convert your Figma designs into React, Tailwind, Bootstrap, and other popular CSS frameworks. Click <a href="https://www.copycat.dev/figma-plugin" target="_blank" rel="noreferrer noopener">here</a> to check out the <a href="https://www.copycat.dev/figma-plugin" target="_blank" rel="noreferrer noopener">CopyCat plugin for Figma</a>.</p>



<div class="wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-1 wp-block-buttons-is-layout-flex">
<div class="wp-block-button"><a class="wp-block-button__link has-background wp-element-button" href="https://www.copycat.dev/figma-to-code" style="background-color:#7b3beb">Convert Figma to Code with CopyCat</a></div>
</div>



<h2 id="rtoc-2"  class="wp-block-heading">Overview</h2>



<p>In this article, we will look at what bootstrap alert is, its proper behavior, and how it provides contextual feedback messages to the user.</p>



<p>We will look at the different classes, like the alert link class for web links. We will also look at alert styles and adding proper alert messages to the alert element, adding buttons for closing alerts, and how to use javascript to make alerts automatically disappear, among other things.</p>



<h2 id="rtoc-3"  class="wp-block-heading">What is Bootstrap Alert?</h2>



<p>The bootstrap alert plugin creates predefined alert messages and styles, for typical user actions to provide appropriate feedback messages for typical user actions.</p>



<p>In the way alert works, this feedback is provided based on eight predefined alert inline classes. The contextual classes are alert-secondary<em>,</em> alert-success<em>,</em> alert-danger<em>,</em> alert-warning<em>,</em> alert-info<em>,</em> alert-light<em>,</em> and alert-dark<em>.</em></p>



<p>For example alert for deletion should be alert-danger or alert-warning<em>.</em> An alert javascript plugin also gives more functionality. The most appropriate location for alerts is at the top of the screen</p>



<h2 id="rtoc-4"  class="wp-block-heading">Setting Up Bootstrap</h2>



<p>The first step to using alert in Bootstrap is adding it to your project. There are two ways:</p>



<ol class="wp-block-list">
<li>Installing via package manager using npm</li>
</ol>


<div class="wp-block-syntaxhighlighter-code "><pre class="brush: jscript; title: ; notranslate">
npm install bootstrap@5.2.3

</pre></div>


<ol class="wp-block-list" start="2">
<li>Including via CDN (Content delivery network)</li>
</ol>


<div class="wp-block-syntaxhighlighter-code "><pre class="brush: jscript; title: ; notranslate">
&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot; /&gt;
    &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot; /&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot; /&gt;
    &lt;title&gt;Document&lt;/title&gt;
    &lt;!-- CSS only --&gt;
    &lt;link
      href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css&quot;
      rel=&quot;stylesheet&quot;
      integrity=&quot;sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65&quot;
      crossorigin=&quot;anonymous&quot;
    /&gt;

    &lt;!-- JavaScript Bundle with Popper --&gt;
    &lt;script
      src=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js&quot;
      integrity=&quot;sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4&quot;
      crossorigin=&quot;anonymous&quot;
    &gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body class=&quot;p-4&quot;&gt;&lt;/body&gt;
&lt;/html&gt;

</pre></div>


<h2 id="rtoc-5"  class="wp-block-heading">Creating alerts in Bootstrap</h2>



<p>After adding bootstrap to your project using either of the methods mentioned above, the next thing is to add the alert class you intend to use. This will be determined by the type of alert you wish to display, be it a success or warning type.</p>



<p>The first step is to add a div tag. A div tag defines a division or a section in an <strong>HTML</strong> document. It can also be used as a container for other HTML elements.</p>



<p>After adding the div, the next thing is to add the class alert which signifies that the alert is to be used here. Then, you add the type of alert you want to use. Like it was stated above, it could be a success alert, danger alert, warning alert, etc.</p>



<p>Then you specify the role, which will also be an &#8220;alert&#8221; value. After that, you can add the text to display within the alert, it could range from &#8220;user logged in&#8221; to &#8220;contact deleted&#8221;.</p>



<p>For proper styling, it is advisable to use contextual classes that convey the appropriate message.</p>



<p>The following code translates the above explanation:</p>


<div class="wp-block-syntaxhighlighter-code "><pre class="brush: jscript; title: ; notranslate">
&lt;div class=&quot;alert alert-primary&quot; role=&quot;alert&quot;&gt;
    simple primary alert
&lt;/div&gt;

</pre></div>


<p>The code above will produce the following output:</p>



<figure class="wp-block-image"><img decoding="async" src="https://cdn.hashnode.com/res/hashnode/image/upload/v1670465221023/vB-egtdoN.png" alt=""/></figure>



<h2 id="rtoc-6"  class="wp-block-heading">Types of Bootstrap Alerts</h2>



<p>There are eight (8) contextual classes of alert;</p>



<ol class="wp-block-list">
<li>alert-primary</li>



<li>alert-secondary</li>



<li>alert-success</li>



<li>alert-danger</li>



<li>alert-warning</li>



<li>alert-info</li>



<li>alert-light</li>



<li>alert-dark</li>
</ol>



<p>They are expected to be used based on the type of message displayed on the UI. It is advisable to use the class that compliments the action and the expected feedback.</p>



<p>This can not be overemphasized. An example of the 8 classes is below.</p>



<h3 id="rtoc-7"  class="wp-block-heading">Alert Alert-success Type</h3>



<p>The alert alert-success classes are for indicating a successful or positive action. For example, when a user successfully signs up.</p>


<div class="wp-block-syntaxhighlighter-code "><pre class="brush: jscript; title: ; notranslate">
&lt;div class=&quot;alert alert-success&quot; role=&quot;alert&quot;&gt;
simple success alert
&lt;/div&gt;

</pre></div>


<p>The <strong>success</strong> alert type will look something like this:</p>



<figure class="wp-block-image"><img decoding="async" src="https://cdn.hashnode.com/res/hashnode/image/upload/v1670465592310/EgkLPwRW7.png" alt=""/></figure>



<h3 id="rtoc-8"  class="wp-block-heading">Alert Alert-info Type</h3>



<p>The alert alert-info classes should be used to indicate a neutral or informative change or action.</p>


<div class="wp-block-syntaxhighlighter-code "><pre class="brush: jscript; title: ; notranslate">
&lt;div class=&quot;alert alert-info&quot; role=&quot;alert&quot;&gt;
simple info alert
&lt;/div&gt;

</pre></div>


<p>The <strong>info</strong> alert type will look something like this:</p>



<figure class="wp-block-image"><img decoding="async" src="https://cdn.hashnode.com/res/hashnode/image/upload/v1670465663365/JR1ZJUYmb.png" alt=""/></figure>



<h3 id="rtoc-9"  class="wp-block-heading">Alert Alert-warning Type</h3>



<p>The alert alert-warning should be used to indicate a warning that might need attention.</p>


<div class="wp-block-syntaxhighlighter-code "><pre class="brush: jscript; title: ; notranslate">
&lt;div class=&quot;alert alert-warning&quot; role=&quot;alert&quot;&gt;
simple warning alert
&lt;/div&gt;

</pre></div>


<p>The <strong>warning</strong> alert type will look something like this:</p>



<figure class="wp-block-image"><img decoding="async" src="https://cdn.hashnode.com/res/hashnode/image/upload/v1670465875683/yF97E4KEH.png" alt=""/></figure>



<h3 id="rtoc-10"  class="wp-block-heading">Alert Alert-danger Type</h3>



<p>The alert alert-danger indicates a dangerous or potentially negative action.</p>


<div class="wp-block-syntaxhighlighter-code "><pre class="brush: jscript; title: ; notranslate">
&lt;div class=&quot;alert alert-danger&quot; role=&quot;alert&quot;&gt;
simple danger alert
&lt;/div&gt;

</pre></div>


<p>The <strong>danger</strong> alert type will look something like this:</p>



<figure class="wp-block-image"><img decoding="async" src="https://cdn.hashnode.com/res/hashnode/image/upload/v1670466045598/Bxm07RwyO.png" alt=""/></figure>



<h4 class="wp-block-heading">The following are the full bootstrap alert types code snippet:</h4>


<div class="wp-block-syntaxhighlighter-code "><pre class="brush: jscript; title: ; notranslate">
&lt;div class=&quot;alert alert-primary&quot; role=&quot;alert&quot;&gt;
simple primary alert
&lt;/div&gt;

&lt;div class=&quot;alert alert-secondary&quot; role=&quot;alert&quot;&gt;
simple secondary alert
&lt;/div&gt;

&lt;div class=&quot;alert alert-success&quot; role=&quot;alert&quot;&gt;
simple success alert
&lt;/div&gt;

&lt;div class=&quot;alert alert-danger&quot; role=&quot;alert&quot;&gt;
simple danger alert
&lt;/div&gt;

&lt;div class=&quot;alert alert-warning&quot; role=&quot;alert&quot;&gt;
simple warning alert
&lt;/div&gt;

&lt;div class=&quot;alert alert-info&quot; role=&quot;alert&quot;&gt;
simple info alert
&lt;/div&gt;

&lt;div class=&quot;alert alert-light&quot; role=&quot;alert&quot;&gt;
simple light alert
&lt;/div&gt;

&lt;div class=&quot;alert alert-dark&quot; role=&quot;alert&quot;&gt;
simple dark alert!
&lt;/div&gt;

</pre></div>


<p>Output:</p>



<figure class="wp-block-image"><img decoding="async" src="https://cdn.hashnode.com/res/hashnode/image/upload/v1670466386048/Hl3C1oMb1.png" alt=""/></figure>



<h3 id="rtoc-11"  class="wp-block-heading">How do I make bootstrap alerts automatically disappear?</h3>



<p>Alert is not meant to stay on the screen forever. This section will deal with closing the alert automatically by using the alert dismissible class.</p>



<p>The first step is to add <a target="_blank" rel="noreferrer noopener" href="https://jquery.com/">jquery</a> to the index.html file, this will give access to the javascript functionality. Add the script tag below to the head tag of your file.</p>


<div class="wp-block-syntaxhighlighter-code "><pre class="brush: jscript; title: ; notranslate">
&lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js&quot;&gt;&lt;/script&gt;

</pre></div>


<p>Next is to create the bootstrap alert component like it was done earlier. This time the class alert-info is used. It is not compulsory to make use of alert-info, any of the alert classes stated earlier can be used.</p>


<div class="wp-block-syntaxhighlighter-code "><pre class="brush: jscript; title: ; notranslate">
&lt;div class=&quot;alert alert-info&quot; role=&quot;alert&quot;&gt;
    &lt;h4 class=&quot;alert-heading&quot;&gt;Cost&lt;/h4&gt;
    $10,000
&lt;/div&gt;
&lt;div class=&quot;alert alert-secondary&quot; role=&quot;alert&quot;&gt;
    &lt;h4 class=&quot;alert-heading&quot;&gt;Cost&lt;/h4&gt;
    $40,000
&lt;/div&gt;

</pre></div>


<p>Now is the time to add some code snippets for the alert function that will add the auto-disappear needed. At the bottom of the file, just after the body closing tag, add the code below.</p>


<div class="wp-block-syntaxhighlighter-code "><pre class="brush: jscript; title: ; notranslate">
&lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function () {
    window.setTimeout(function () {
    $(&quot;.alert&quot;)
        .fadeTo(1000, 0)
        .slideUp(1000, function () {
        $(this).remove();
        });
    }, 5000);
});
&lt;/script&gt;

</pre></div>


<p>The above code will dismiss the alert after five (5) seconds as demonstrated below:</p>



<figure class="wp-block-image"><img decoding="async" src="https://cdn.hashnode.com/res/hashnode/image/upload/v1670467183714/OcLRFjmgC.gif" alt=""/></figure>



<h2 id="rtoc-12"  class="wp-block-heading">Styling Bootstrap Alerts</h2>



<p>When you need to show the important alert message you might need to style them to give it better visibility. This can be done via <a target="_blank" rel="noreferrer noopener" href="https://www.freecodecamp.org/news/inline-style-in-html/">in-line styles</a>, bootstrap predefined classes, or a style sheet. The example in this section demonstrates alert styles using a style sheet.</p>



<p>First, create the style sheet and link to the HTML file using the link tag. The path should point to the exact location of the stylesheet.</p>


<div class="wp-block-syntaxhighlighter-code "><pre class="brush: jscript; title: ; notranslate">
&lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot; /&gt;

</pre></div>


<p>The simple HTML code structure below should do for this demonstration:</p>


<div class="wp-block-syntaxhighlighter-code "><pre class="brush: jscript; title: ; notranslate">
&lt;div class=&quot;alert alert-success&quot; role=&quot;alert&quot;&gt;
    &lt;h1&gt;Hey!&lt;/h1&gt;
    simple success alert
&lt;/div&gt;
&lt;div class=&quot;alert alert-info&quot; role=&quot;alert&quot;&gt;
    &lt;h3&gt;Hey!&lt;/h3&gt;
    simple info alert
&lt;/div&gt;
&lt;div class=&quot;alert alert-warning&quot; role=&quot;alert&quot;&gt;
    &lt;h2&gt;Hey!&lt;/h2&gt;
    simple warning alert
&lt;/div&gt;
&lt;div class=&quot;alert alert-danger&quot; role=&quot;alert&quot;&gt;
    &lt;h2&gt;Hey!&lt;/h2&gt;
    simple danger alert
&lt;/div&gt;

</pre></div>


<p>The default output of the above HTML code is as follows:</p>



<figure class="wp-block-image"><img decoding="async" src="https://cdn.hashnode.com/res/hashnode/image/upload/v1670467777025/5fNLJsd7c.png" alt=""/></figure>



<p>You can add styles according to your needs using the alert type classes as shown below. Copy the code below into your style.css file:</p>


<div class="wp-block-syntaxhighlighter-code "><pre class="brush: jscript; title: ; notranslate">
.alert-success {
  border-color: #e6e6e6;
  border-left: 100px solid #00986a;
  background-color: #fff;
  color: #888;
}

.alert-info {
  border-color: #e6e6e6;
  border-left: 100px solid #00b3c8;
  background-color: #fff;
  color: #888;
}

.alert-warning {
  border-color: #e6e6e6;
  border-left: 100px solid #f9af2c;
  background-color: #fff;
  color: #888;
}

.alert-danger {
  border-color: #e6e6e6;
  border-left: 100px solid #c82630;
  background-color: #fff;
  color: #888;
}

</pre></div>


<p>The output with the custom CSS styles will look something like this:</p>



<figure class="wp-block-image"><img decoding="async" src="https://cdn.hashnode.com/res/hashnode/image/upload/v1670467729508/KDJnZWVOB.png" alt=""/></figure>



<h2 id="rtoc-13"  class="wp-block-heading">Closing Alerts via Data Attributes</h2>



<p>As stated earlier, an alert is not meant to stay on the screen forever. It can also be closed via a <a target="_blank" rel="noreferrer noopener" href="https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event">click event</a> this will involve adding a button component and some additional contextual classes e.g alert-dismissible.</p>



<p>The code below adds a close button to the regular alert that makes the alert close when the button is clicked.</p>


<div class="wp-block-syntaxhighlighter-code "><pre class="brush: jscript; title: ; notranslate">
&lt;div class=&quot;alert alert-warning alert-dismissible fade show&quot;&gt;
    Click X to close...
    &lt;button
    type=&quot;button&quot;
    class=&quot;btn-close&quot;
    data-bs-dismiss=&quot;alert&quot;
    aria-label=&quot;Close&quot;
    &gt;&lt;/button&gt;
&lt;/div&gt;

</pre></div>


<p>The above code will function as follows:</p>



<figure class="wp-block-image"><img decoding="async" src="https://cdn.hashnode.com/res/hashnode/image/upload/v1670468473841/M-SpcfpNV.gif" alt=""/></figure>



<h2 id="rtoc-14"  class="wp-block-heading">Bootstrap Alert Examples</h2>



<p>This time around, we will look into a typical alert example. Several examples have been given above, but this will shed more light.</p>



<p>When using an alert, the most appropriate element should be used. The color of the alert must carry a clear interpretation of the action.</p>



<p>For example alert for successful action should be green, failed action should be red.</p>



<figure class="wp-block-image"><img decoding="async" src="https://cdn.hashnode.com/res/hashnode/image/upload/v1670468780587/jG-YdK4sH.png" alt=""/></figure>



<p>From the image above, it is obvious the alert with green background is the most appropriate element for the success message since it carries a clear interpretation.</p>



<p>Below is an appropriate use of the alert type on a failed and a successful action as follows:</p>



<figure class="wp-block-image"><img decoding="async" src="https://cdn.hashnode.com/res/hashnode/image/upload/v1670468695945/4ditCJZYk.png" alt=""/></figure>



<h2 id="rtoc-15"  class="wp-block-heading">Add icons to Bootstrap Alerts</h2>



<p>Icons can make alerts more descriptive and in some cases, it&#8217;s advisable to use them. Bootstrap supports a large number of icon sets as given below:</p>



<ul class="wp-block-list">
<li><a target="_blank" rel="noreferrer noopener" href="https://icons.getbootstrap.com/">Bootstrap Icons</a></li>



<li><a target="_blank" rel="noreferrer noopener" href="https://fontawesome.com/">Font Awesome</a></li>



<li><a target="_blank" rel="noreferrer noopener" href="https://icons8.com/">Icons 8</a></li>



<li><a target="_blank" rel="noreferrer noopener" href="https://feathericons.com/">Feather</a></li>



<li><a target="_blank" rel="noreferrer noopener" href="https://octicons.github.com/">Octicons</a></li>



<li><a target="_blank" rel="noreferrer noopener" href="https://fonts.google.com/icons">Google Material Icons.</a></li>
</ul>



<p>Bootstrap team has introduced over 1,800 icons that are free and high quality, you no longer have to use font awesome or something like that, you can just stick to the <a target="_blank" rel="noreferrer noopener" href="https://icons.getbootstrap.com/">bootstrap font pack</a>.</p>



<p>You can install these icons either through <a target="_blank" rel="noreferrer noopener" href="https://www.npmjs.com/">NPM</a>, manual download, or CDN. The example below shows how to add bootstrap icons to bootstrap alerts using CDN.</p>



<p>The first step is to add the CDN link in the head tag:</p>


<div class="wp-block-syntaxhighlighter-code "><pre class="brush: jscript; title: ; notranslate">
&lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.3/font/bootstrap-icons.css&quot;/&gt;

</pre></div>


<p>Add the following code within your HTML body:</p>


<div class="wp-block-syntaxhighlighter-code "><pre class="brush: jscript; title: ; notranslate">
&lt;div class=&quot;alert alert-primary alert-dismissible fade show&quot; role=&quot;alert&quot;&gt;
    &lt;i class=&quot;bi bi-app-indicator&quot;&gt;&lt;/i&gt; 
    
    alert primary
    
    &lt;button
    type=&quot;button&quot;
    class=&quot;btn-close&quot;
    data-bs-dismiss=&quot;alert&quot;
    aria-label=&quot;Close&quot;
    &gt;&lt;/button&gt;
&lt;/div&gt;
&lt;div class=&quot;alert alert-success alert-dismissible fade show&quot; role=&quot;alert&quot;&gt;
    &lt;i class=&quot;bi bi-check-circle-fill&quot;&gt;&lt;/i&gt; 
    
    alert success
    
    &lt;button
    type=&quot;button&quot;
    class=&quot;btn-close&quot;
    data-bs-dismiss=&quot;alert&quot;
    aria-label=&quot;Close&quot;
    &gt;&lt;/button&gt;
&lt;/div&gt;
&lt;div class=&quot;alert alert-danger alert-dismissible fade show&quot; role=&quot;alert&quot;&gt;
    &lt;i class=&quot;bi bi-x-circle-fill&quot;&gt;&lt;/i&gt;
    
    alert danger
    
    &lt;button
    type=&quot;button&quot;
    class=&quot;btn-close&quot;
    data-bs-dismiss=&quot;alert&quot;
    aria-label=&quot;Close&quot;
    &gt;&lt;/button&gt;
&lt;/div&gt;
&lt;div class=&quot;alert alert-info alert-dismissible fade show&quot; role=&quot;alert&quot;&gt;
    
    &lt;i class=&quot;bi bi-info-circle-fill&quot;&gt;&lt;/i&gt; 

    alert info
    
    &lt;button
    type=&quot;button&quot;
    class=&quot;btn-close&quot;
    data-bs-dismiss=&quot;alert&quot;
    aria-label=&quot;Close&quot;
    &gt;&lt;/button&gt;
&lt;/div&gt;

</pre></div>


<p>The above code will add icons to the alert component as shown below:</p>



<figure class="wp-block-image"><img decoding="async" src="https://cdn.hashnode.com/res/hashnode/image/upload/v1670469227882/1vmwKslkd.png" alt=""/></figure>



<p>You can check out the complete bootstrap icons here.</p>



<h2 id="rtoc-16"  class="wp-block-heading">Additional Content Inside Bootstrap Alerts</h2>



<p>On some websites, we regularly come across particular alerts either before or after executing an activity. These bootstrap alert messages are highlighted text that has to be considered when carrying out an activity. These alerts may appear with contextual feedback messages.</p>



<figure class="wp-block-image"><img decoding="async" src="https://cdn.hashnode.com/res/hashnode/image/upload/v1670469574935/Xzt8PN-Iz.png" alt=""/></figure>



<p>For example, while shopping for items online, if an item was added to the cart or a purchase was made, it would be nice to get a confirmation alert that the action was successful, default notifications with alert primary, or failure which can be achieved with a simple danger alert.</p>



<p>The example above is achieved with the code below:</p>



<ul class="wp-block-list">
<li>For adding to the cart</li>
</ul>


<div class="wp-block-syntaxhighlighter-code "><pre class="brush: jscript; title: ; notranslate">
&lt;div class=&quot;alert alert-success alert-dismissible fade show&quot; role=&quot;alert&quot;&gt;
    &lt;h3&gt;Success!&lt;/h3&gt;
    An item was successfully added to your cart. You now have a total of
    &lt;strong&gt;5&lt;/strong&gt;
    items
    &lt;button
    type=&quot;button&quot;
    class=&quot;btn-close&quot;
    data-bs-dismiss=&quot;alert&quot;
    aria-label=&quot;Close&quot;
    &gt;&lt;/button&gt;
&lt;/div&gt;
</pre></div>


<ul class="wp-block-list">
<li>For removing items from the cart<code> </code></li>
</ul>


<div class="wp-block-syntaxhighlighter-code "><pre class="brush: jscript; title: ; notranslate">
&lt;div class=&quot;alert alert-danger alert-dismissible fade show&quot; role=&quot;alert&quot;&gt;
    &lt;h3&gt;Deleted!&lt;/h3&gt;
    An item was successfully &lt;strong&gt;removed&lt;/strong&gt; to your cart. You now
    have a total of
    &lt;strong&gt;4&lt;/strong&gt;
    items
    &lt;button
    type=&quot;button&quot;
    class=&quot;btn-close&quot;
    data-bs-dismiss=&quot;alert&quot;
    aria-label=&quot;Close&quot;
    &gt;&lt;/button&gt;
&lt;/div&gt;
</pre></div>


<ul class="wp-block-list">
<li>Output:<img decoding="async" src="https://cdn.hashnode.com/res/hashnode/image/upload/v1670469834189/HB0y_1g8c.png" alt=""></li>



<li>For duplicate items</li>
</ul>


<div class="wp-block-syntaxhighlighter-code "><pre class="brush: jscript; title: ; notranslate">
&lt;div class=&quot;alert alert-info alert-dismissible fade show&quot; role=&quot;alert&quot;&gt;
    &lt;h3&gt;Duplicate!&lt;/h3&gt;
    You already have &lt;strong&gt;yellow leather bag&lt;/strong&gt; in your cart
    &lt;button
    type=&quot;button&quot;
    class=&quot;btn-close&quot;
    data-bs-dismiss=&quot;alert&quot;
    aria-label=&quot;Close&quot;
    &gt;&lt;/button&gt;
&lt;/div&gt;
</pre></div>


<ul class="wp-block-list">
<li>Output:<img decoding="async" src="https://cdn.hashnode.com/res/hashnode/image/upload/v1670469904258/s_bNIFbEm.png" alt=""></li>



<li>For displaying the total in the cart</li>
</ul>


<div class="wp-block-syntaxhighlighter-code "><pre class="brush: jscript; title: ; notranslate">
&lt;div class=&quot;alert alert-primary alert-dismissible fade show&quot; role=&quot;alert&quot;&gt;
    &lt;h3&gt;Hey!&lt;/h3&gt;
    You have made a total of &lt;strong&gt;12&lt;/strong&gt; orders this month
    &lt;button
    type=&quot;button&quot;
    class=&quot;btn-close&quot;
    data-bs-dismiss=&quot;alert&quot;
    aria-label=&quot;Close&quot;
    &gt;&lt;/button&gt;
&lt;/div&gt;
</pre></div>


<ul class="wp-block-list">
<li>Output:<img decoding="async" src="https://cdn.hashnode.com/res/hashnode/image/upload/v1670470078027/lVc3uWPB6.png" alt=""></li>
</ul>



<h2 id="rtoc-17"  class="wp-block-heading">Adding Link in Bootstrap Alert</h2>



<p>In some cases, alerts might need to have internal or external links embedded into them. Maybe the alert is for a new policy change and you need to provide a link to the policy document, or you want to inform the user that their subscription is about to expire and you want to provide a link to the subscription page then you need to embed the link in the alert element.</p>



<p>A simple warning alert with a link may go as follows:</p>


<div class="wp-block-syntaxhighlighter-code "><pre class="brush: jscript; title: ; notranslate">
&lt;div class=&quot;alert alert-warning alert-dismissible fade show&quot; role=&quot;alert&quot;&gt;
    &lt;h4&gt;Subscription Update&lt;/h4&gt;
    Your monthly Subscription to our newsletter will soon expire
    &lt;a href=&quot;#&quot;&gt;click here renew&lt;/a
    &gt;&lt;button
    type=&quot;button&quot;
    class=&quot;btn-close&quot;
    data-bs-dismiss=&quot;alert&quot;
    aria-label=&quot;Close&quot;
    &gt;&lt;/button&gt;
&lt;/div&gt;

</pre></div>


<p>Output:</p>



<figure class="wp-block-image"><img decoding="async" src="https://cdn.hashnode.com/res/hashnode/image/upload/v1670470304664/zxPXv2Q1s.png" alt=""/></figure>



<p>A simple primary alert with a link:</p>


<div class="wp-block-syntaxhighlighter-code "><pre class="brush: jscript; title: ; notranslate">
&lt;div class=&quot;alert alert-primary alert-dismissible fade show&quot; role=&quot;alert&quot;&gt;
    &lt;h4&gt;Policy Update&lt;/h4&gt;
    We updated our company policy,
    &lt;a href=&quot;#&quot;&gt;click here to read more&lt;/a
    &gt;&lt;button
    type=&quot;button&quot;
    class=&quot;btn-close&quot;
    data-bs-dismiss=&quot;alert&quot;
    aria-label=&quot;Close&quot;
    &gt;&lt;/button&gt;
&lt;/div&gt;

</pre></div>


<p>Output:</p>



<figure class="wp-block-image"><img decoding="async" src="https://cdn.hashnode.com/res/hashnode/image/upload/v1670470447518/K9eVsrcuA.png" alt=""/></figure>



<p>In the two examples above, links are easily embedded in an alert element. But there is a problem, the link is not taking the style of the alert element, which will be discussed in the next section.</p>



<h2 id="rtoc-18"  class="wp-block-heading">Matching Links Color inside Alerts</h2>



<p>To provide matching colored links within any alert, use the alert-link utility class. This ensures that the color of the link matches the color of the alert. This in turn gives the alert a better feel.</p>



<p>The example below transforms the previous examples into appropriate colors:</p>


<div class="wp-block-syntaxhighlighter-code "><pre class="brush: jscript; title: ; notranslate">
&lt;div class=&quot;alert alert-warning alert-dismissible fade show&quot; role=&quot;alert&quot;&gt;
    &lt;h4&gt;Subscription Update&lt;/h4&gt;
    Your monthly subcription to our newsletter will soon expire
    &lt;a href=&quot;#&quot; class=&quot;alert-link&quot;&gt;click here to renew&lt;/a
    &gt;&lt;button
    type=&quot;button&quot;
    class=&quot;btn-close&quot;
    data-bs-dismiss=&quot;alert&quot;
    aria-label=&quot;Close&quot;
    &gt;&lt;/button&gt;
&lt;/div&gt;
&lt;div class=&quot;alert alert-primary alert-dismissible fade show&quot; role=&quot;alert&quot;&gt;
    &lt;h4&gt;Policy Update&lt;/h4&gt;
    We updated our company policy,
    &lt;a href=&quot;#&quot; class=&quot;alert-link&quot;&gt;click here to read more&lt;/a
    &gt;&lt;button
    type=&quot;button&quot;
    class=&quot;btn-close&quot;
    data-bs-dismiss=&quot;alert&quot;
    aria-label=&quot;Close&quot;
    &gt;&lt;/button&gt;
&lt;/div&gt;
&lt;div class=&quot;alert alert-secondary alert-dismissible fade show&quot; role=&quot;alert&quot;&gt;
    &lt;h4&gt;Update&lt;/h4&gt;
    The interest for this month was paid into your account,
    &lt;a href=&quot;#&quot; class=&quot;alert-link&quot;&gt;click here check&lt;/a
    &gt;&lt;button
    type=&quot;button&quot;
    class=&quot;btn-close&quot;
    data-bs-dismiss=&quot;alert&quot;
    aria-label=&quot;Close&quot;
    &gt;&lt;/button&gt;
&lt;/div&gt;

</pre></div>


<p>Output:</p>



<figure class="wp-block-image"><img decoding="async" src="https://cdn.hashnode.com/res/hashnode/image/upload/v1670470610954/RpCBmYCXe.png" alt=""/></figure>



<h2 id="rtoc-19"  class="wp-block-heading">Wrapping Up</h2>



<p>With Bootstrap alert, developers can easily use predesigned responsive alerts for push notifications without having to write the code from scratch. This will allow for maintaining consistency among projects when using multiple developer teams.</p>



<p>Additionally, due to the many customization options, alerts may simply be adjusted to match the majority of UI styles.</p>



<p>Watch the video tutorial below to learn more about how to create a real-world Bootstrap alert application.</p>



<figure class="wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
<iframe title="Display Flash Messages in Bootstrap Alert" width="500" height="281" src="https://www.youtube.com/embed/g8IXN0cVQws?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div></figure>



<p>Finally, more articles like this are on our <a href="https://www.copycat.dev/blog/" target="_blank" rel="noreferrer noopener">CopyCat blog</a>. CopyCat converts your Figma files into a ready-to-use React project, saving you over 35% of development time. You can check out CopyCat <a href="https://www.copycat.dev/" target="_blank" rel="noreferrer noopener">here</a>.</p>



<div class="wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-2 wp-block-buttons-is-layout-flex">
<div class="wp-block-button"><a class="wp-block-button__link has-background wp-element-button" href="https://www.copycat.dev/" style="background-color:#7b3beb">Convert Figma to React with CopyCat</a></div>
</div>



<h3 id="rtoc-20"  class="wp-block-heading"><strong>Interesting Reads From Our Blogs</strong></h3>



<ul class="wp-block-list">
<li><a target="_blank" rel="noreferrer noopener" href="https://www.copycat.dev/blog/bootstrap-navbar/"><strong>How to Create an Amazing Bootstrap Navbar Complete Guide</strong></a></li>



<li><a target="_blank" rel="noreferrer noopener" href="https://www.copycat.dev/blog/bootstrap-colors/"><strong>Understanding Bootstrap Colors in Full</strong></a></li>



<li><a target="_blank" rel="noreferrer noopener" href="https://www.copycat.dev/blog/bootstrap-flex/"><strong>Use Bootstrap Flex in Your React Projects for Great Web Design</strong></a></li>



<li><a target="_blank" rel="noreferrer noopener" href="https://www.copycat.dev/blog/bootstrap-breakpoints/"><strong>A Complete Guide On How to Use Bootstrap Breakpoints</strong></a></li>
</ul>



<p>Happy Coding <img src="https://s.w.org/images/core/emoji/15.0.3/72x72/1f468-1f3fd-200d-1f4bb.png" alt="👨🏽‍💻" class="wp-smiley" style="height: 1em; max-height: 1em;" /></p>
<p>The post <a rel="nofollow" href="https://www.copycat.dev/blog/bootstrap-alert/">How to Get Started with Bootstrap Alert</a> appeared first on <a rel="nofollow" href="https://www.copycat.dev/blog">CopyCat Blog</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.copycat.dev/blog/bootstrap-alert/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
		<post-id xmlns="com-wordpress:feed-additions:1">2606</post-id>	</item>
	</channel>
</rss>