{"id":89440,"date":"2021-10-01T23:13:50","date_gmt":"2021-10-02T03:13:50","guid":{"rendered":"https:\/\/www.inmotionhosting.com\/support\/?p=89440"},"modified":"2023-11-16T13:24:03","modified_gmt":"2023-11-16T18:24:03","slug":"bootstrap5-alerts-joomla4","status":"publish","type":"post","link":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/bootstrap5-alerts-joomla4\/","title":{"rendered":"How to Use Bootstrap 5.0 Alerts in Joomla 4.0"},"content":{"rendered":"<figure class=\"wp-block-image size-large is-style-default\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"538\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/11\/Bootstrap-Alerts-in-Joomla-4-1024x538.png\" alt=\"How to Use Bootstrap 5.0 Alerts in Joomla 4.0 Hero Image\" class=\"wp-image-107691\" srcset=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/11\/Bootstrap-Alerts-in-Joomla-4-1024x538.png 1024w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/11\/Bootstrap-Alerts-in-Joomla-4-300x158.png 300w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/11\/Bootstrap-Alerts-in-Joomla-4-768x403.png 768w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/11\/Bootstrap-Alerts-in-Joomla-4.png 1200w\" sizes=\"auto, (min-width: 1360px) 876px, (min-width: 960px) calc(61.58vw + 51px), calc(100vw - 80px)\" \/><\/figure>\n\n\n\n<p>One of the more common ways to emphasize text in a Joomla 4.0 site is to use Bootstrap 5 alerts. Alerts give you a different text look, background, and in some cases even adds a small graphic.  <\/p>\n\n\n\n<p>This article will provide the code and examples of how you can add alerts to your Joomla content.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"#add-code\">How to add Bootstrap 5.0 Code in Joomla 4.0<\/a><\/li>\n\n\n\n<li><a href=\"#alert-types\">Examples of Different Alert Types<\/a><\/li>\n\n\n\n<li><a href=\"#triggering\">Triggering Alerts<\/a><\/li>\n\n\n\n<li><a href=\"#icons\">Alerts with Icons<\/a><\/li>\n\n\n\n<li><a href=\"#assistive-tech\">Working with Assistive Technologies<\/a><\/li>\n<\/ul>\n\n\n\n<p class=\"alert alert-info\">Need a home for your newly created Joomla 4.0 website?  Check InMotion\u2019s <a href=\"\/vps-hosting\">VPS hosting services<\/a>!  You\u2019ll find secure servers tailored to meet your budget needs!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"add-code\"> How to add Bootstrap 5.0 Code in Joomla 4.0 <\/h2>\n\n\n\n<p>When you\u2019re working in Joomla, adding the code is very simple. Here\u2019s a quick example of you how you would add the code using the Joomla 4.0 editor:<\/p>\n\n\n\n<ol class=\"article_list wp-block-list\">\n<li><a href=\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/how-to-log-in-to-administrative-dashboard\/\">Log into the <strong>Joomla Administrator Dashboard<\/strong><\/a>.<\/li>\n\n\n\n<li>Click on <strong>Content <\/strong>in the main menu.<\/li>\n\n\n\n<li>Add a new article or edit an existing one.  This will put you into the Joomla content editor.<\/li>\n\n\n\n<li>Click on <strong>Toggle Editor<\/strong> in the bottom right corner of the editor.  This will place the editor in text mode.  You should only add code in this mode.<br><br><img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"586\" class=\"wp-image-89443\" style=\"width: 1000px;\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/10\/toggle-editor.jpg\" alt=\"Toggle Editor\" srcset=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/10\/toggle-editor.jpg 1408w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/10\/toggle-editor-300x176.jpg 300w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/10\/toggle-editor-1024x600.jpg 1024w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/10\/toggle-editor-768x450.jpg 768w\" sizes=\"auto, (min-width: 1360px) 876px, (min-width: 960px) calc(61.58vw + 51px), calc(100vw - 80px)\" \/><br><\/li>\n\n\n\n<li>Type in or paste in the code that you want to use.<br><br><img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"431\" class=\"wp-image-89442\" style=\"width: 1000px;\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/10\/adding-code.jpg\" alt=\"Add code in text editor\" srcset=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/10\/adding-code.jpg 1919w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/10\/adding-code-300x129.jpg 300w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/10\/adding-code-1024x441.jpg 1024w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/10\/adding-code-768x331.jpg 768w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/10\/adding-code-1536x662.jpg 1536w\" sizes=\"auto, (min-width: 1360px) 876px, (min-width: 960px) calc(61.58vw + 51px), calc(100vw - 80px)\" \/><br><\/li>\n\n\n\n<li>Once you have the code added, click on <strong>Save <\/strong>or <strong>Save &amp; Close<\/strong> in the top left corner of the editor to save your changes.<\/li>\n\n\n\n<li>When your code is saved you can see that there is an option to preview your article at the top of the page (next to the Save options).  Click on <strong>Preview<\/strong>. The code is highlighted by a red box.<br><br><img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"621\" class=\"wp-image-89444\" style=\"width: 1000px;\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/10\/preview-of-code-highlighted.jpg\" alt=\"preview of added code\" srcset=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/10\/preview-of-code-highlighted.jpg 906w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/10\/preview-of-code-highlighted-300x186.jpg 300w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/10\/preview-of-code-highlighted-768x477.jpg 768w\" sizes=\"auto, (min-width: 1360px) 876px, (min-width: 960px) calc(61.58vw + 51px), calc(100vw - 80px)\" \/><br><\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"alert-types\">Examples of Different Alert Types<\/h2>\n\n\n\n<p>Using color with your text alerts can help to convey meaning to the viewer.  Bootstrap alerts currently convert 8 different colors that can be used to help emphasize messages to your users.  These colored alerts are defined by their name and color.  <\/p>\n\n\n\n<p class=\"alert alert-warning\">You can apply alert types to text using DIV, H, P, and span tags.  The format is the same from tag to tag. <br><br>The colors may slightly differ depending on your display device and graphics card.  So, to provide a better understanding of each alert type the example code will be followed by a sentence describing the background and font color of each alert.<\/p>\n\n\n\n<p>Primary alert<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"alert alert-primary\" role=\"alert\"&gt;\n  This is a primary alert!\n&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-full is-style-default\"><a href=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/10\/primary-alert.jpg\"><img loading=\"lazy\" decoding=\"async\" width=\"366\" height=\"101\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/10\/primary-alert.jpg\" alt=\"\" class=\"wp-image-89478\" srcset=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/10\/primary-alert.jpg 366w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/10\/primary-alert-300x83.jpg 300w\" sizes=\"auto, (min-width: 1360px) 876px, (min-width: 960px) calc(61.58vw + 51px), calc(100vw - 80px)\" \/><\/a><\/figure>\n\n\n\n<p>The primary alert has a light blue background with the font being a darker blue.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Secondary Alert<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"alert alert-secondary\" role=\"alert\"&gt;\n  This is a secondary alert!\n&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-full is-style-default\"><img loading=\"lazy\" decoding=\"async\" width=\"384\" height=\"100\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/10\/secondary-alert-1.jpg\" alt=\"\" class=\"wp-image-89471\" srcset=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/10\/secondary-alert-1.jpg 384w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/10\/secondary-alert-1-300x78.jpg 300w\" sizes=\"auto, (min-width: 1360px) 876px, (min-width: 960px) calc(61.58vw + 51px), calc(100vw - 80px)\" \/><\/figure>\n\n\n\n<p>The secondary alert has a light gray background and the type is displayed in a dark gray.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Success Alert<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"alert alert-success\" role=\"alert\"&gt;\n  This is a success alert!\n&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-full is-style-default\"><img loading=\"lazy\" decoding=\"async\" width=\"366\" height=\"100\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/10\/success-alert.jpg\" alt=\"\" class=\"wp-image-89472\" srcset=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/10\/success-alert.jpg 366w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/10\/success-alert-300x82.jpg 300w\" sizes=\"auto, (min-width: 1360px) 876px, (min-width: 960px) calc(61.58vw + 51px), calc(100vw - 80px)\" \/><\/figure>\n\n\n\n<p>The success alert has a light green background and the type is dark green.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Danger Alert<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"alert alert-danger\" role=\"alert\"&gt;\n This is a danger alert!\n&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-full is-style-default\"><img loading=\"lazy\" decoding=\"async\" width=\"345\" height=\"103\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/10\/danger-alert.jpg\" alt=\"\" class=\"wp-image-89473\" srcset=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/10\/danger-alert.jpg 345w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/10\/danger-alert-300x90.jpg 300w\" sizes=\"auto, (min-width: 1360px) 876px, (min-width: 960px) calc(61.58vw + 51px), calc(100vw - 80px)\" \/><\/figure>\n\n\n\n<p>The danger alert has a lighter red background and a dark red font.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Warning Alert<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"alert alert-warning\" role=\"alert\"&gt;\n  This is a warning alert!\n&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-full is-style-default\"><img loading=\"lazy\" decoding=\"async\" width=\"351\" height=\"99\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/10\/warning-alert.jpg\" alt=\"\" class=\"wp-image-89474\" srcset=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/10\/warning-alert.jpg 351w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/10\/warning-alert-300x85.jpg 300w\" sizes=\"auto, (min-width: 1360px) 876px, (min-width: 960px) calc(61.58vw + 51px), calc(100vw - 80px)\" \/><\/figure>\n\n\n\n<p>The warning alert has an amber background and dark brown type.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Info Alert<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"alert alert-info\" role=\"alert\"&gt;\n  Thi is an info alert!\n&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-full is-style-default\"><img loading=\"lazy\" decoding=\"async\" width=\"336\" height=\"103\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/10\/info-alert.jpg\" alt=\"\" class=\"wp-image-89475\" srcset=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/10\/info-alert.jpg 336w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/10\/info-alert-300x92.jpg 300w\" sizes=\"auto, (min-width: 1360px) 876px, (min-width: 960px) calc(61.58vw + 51px), calc(100vw - 80px)\" \/><\/figure>\n\n\n\n<p>The info alert has a light blue background and the type is a dark blue.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Light Alert<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"alert alert-light\" role=\"alert\"&gt;\n  This is a light alert!\n&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-full is-style-default\"><img loading=\"lazy\" decoding=\"async\" width=\"297\" height=\"101\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/10\/light-alert.jpg\" alt=\"\" class=\"wp-image-89476\"><\/figure>\n\n\n\n<p>Although it\u2019s hard to see, there is a slightly darker background (almost white) and the type appears to be a dark gray.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Dark Alert<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"alert alert-dark\" role=\"alert\"&gt;\n  This is a dark alert!\n&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-full is-style-default\"><img loading=\"lazy\" decoding=\"async\" width=\"303\" height=\"99\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/10\/dark-alert.jpg\" alt=\"\" class=\"wp-image-89477\" srcset=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/10\/dark-alert.jpg 303w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/10\/dark-alert-300x99.jpg 300w\" sizes=\"auto, (min-width: 1360px) 876px, (min-width: 960px) calc(61.58vw + 51px), calc(100vw - 80px)\" \/><\/figure>\n\n\n\n<p>The dark alert has a darker gray background and the type is almost black. <\/p>\n\n\n\n<p>The 8 alert types have distinctive colors that can be used to convey meaning for the text that you are displaying to your viewers.  For example, if you are discussing a critical point, then you may want to display a portion of the text in red to show its importance.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"triggering\">Triggering Alerts<\/h2>\n\n\n\n<p>In addition to supplying different colors of text, you can use an alert so that it appears after you have triggered it with a button or link.  <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;p&gt;\n  &lt;a class=\"btn btn-primary\" data-bs-toggle=\"collapse\" href=\"#collapseExample\" role=\"button\" aria-expanded=\"false\" aria-controls=\"collapseExample\"&gt;\n    Link with href\n  &lt;\/a&gt;\n  &lt;button class=\"btn btn-primary\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#collapseExample\" aria-expanded=\"false\" aria-controls=\"collapseExample\"&gt;\n    Button with data-bs-target\n  &lt;\/button&gt;\n&lt;\/p&gt;\n&lt;div class=\"collapse\" id=\"collapseExample\"&gt;\n  &lt;div class=\"card card-body\"&gt;\n    Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.\n  &lt;\/div&gt;\n&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>The code above makes use of a button and the collapse option provided with Bootstrap 5.0.  You can click either button and then a danger colored alert will appear<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-style-default\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"284\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/10\/example-collapse-red-text-1024x284.jpg\" alt=\"\" class=\"wp-image-89484\" srcset=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/10\/example-collapse-red-text-1024x284.jpg 1024w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/10\/example-collapse-red-text-300x83.jpg 300w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/10\/example-collapse-red-text-768x213.jpg 768w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/10\/example-collapse-red-text.jpg 1215w\" sizes=\"auto, (min-width: 1360px) 876px, (min-width: 960px) calc(61.58vw + 51px), calc(100vw - 80px)\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"icons\">Alerts with Icons<\/h2>\n\n\n\n<p>Alerts can also make use of <a href=\"https:\/\/icons.getbootstrap.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Bootstrap icons<\/a> in order to provide a small flexible graphic that can bring more emphasis and meaning to your text.  <\/p>\n\n\n\n<p>Bootstrap Icons use the SVG format, allowing you to embed the image using HTML. Bootstrap Icons also have a\u00a0<code>width<\/code>\u00a0and\u00a0<code>height<\/code>\u00a0of\u00a0<code>1em<\/code> that can be changed by using different font sizes.<\/p>\n\n\n\n<p>Here is an example of code with an alert using a graphic:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"alert alert-primary d-flex align-items-center\" role=\"alert\"&gt;\n  &lt;svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" fill=\"currentColor\" class=\"bi bi-exclamation-triangle-fill flex-shrink-0 me-2\" viewBox=\"0 0 16 16\" role=\"img\" aria-label=\"Warning:\"&gt;\n    &lt;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\"\/&gt;\n  &lt;\/svg&gt;\n  &lt;div&gt;\n    An example alert with an icon\n  &lt;\/div&gt;\n&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-full is-style-default\"><img loading=\"lazy\" decoding=\"async\" width=\"509\" height=\"98\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/10\/example-icon-with-alert.jpg\" alt=\"\" class=\"wp-image-89488\" srcset=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/10\/example-icon-with-alert.jpg 509w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/10\/example-icon-with-alert-300x58.jpg 300w\" sizes=\"auto, (min-width: 1360px) 876px, (min-width: 960px) calc(61.58vw + 51px), calc(100vw - 80px)\" \/><\/figure>\n\n\n\n<p>Using the code, you can add a small icon that will help to provide better emphasis for your text.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"assistive-tech\">Working with Assistive Technologies<\/h2>\n\n\n\n<p>When using colors with Bootstrap code like alerts, there can be issues with assistive technologies such as screen readers. The colors used by the code may add meaning to a text phrase, but this can\u2019t be interpreted by the screen reader. To help provide the information for individuals using screen readers, it is common practice to use the span tag with the \u201cvisually-hidden\u201d class.  Here\u2019s an example:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"alert alert-success\"&gt; &lt;p&gt;You have succeeded in advancing!&lt;\/p&gt;\n&lt;span class=\"visually-hidden\"&gt;success alert is being used and is colored green&lt;\/span&gt;\n&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-full is-style-default\"><img loading=\"lazy\" decoding=\"async\" width=\"616\" height=\"91\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/10\/assistive-example-green.jpg\" alt=\"\" class=\"wp-image-89487\" srcset=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/10\/assistive-example-green.jpg 616w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/10\/assistive-example-green-300x44.jpg 300w\" sizes=\"auto, (min-width: 1360px) 876px, (min-width: 960px) calc(61.58vw + 51px), calc(100vw - 80px)\" \/><\/figure>\n\n\n\n<p>The text is generated with no issue, but the \u201cvisually-hidden\u201d option is used to keep the text hidden.<\/p>\n\n\n\n<p>To help your users who may be visually impaired and requires the use of assistive technologies, make sure to use the \u201cvisually-hidden\u201d class to help provide the extra meaning that your colored alerts may hide.<\/p>\n\n\n<div class=\"jumbotron\">\r\n<p>Launch your web presence quickly and easily with <a href=\"https:\/\/www.inmotionhosting.com\/shared-hosting\">Shared Hosting<\/a>. Our user-friendly hosting is perfect for everyone, providing the fastest shared hosting experience possible, all powered by cPanel.<\/p>\r\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/design.inmotionhosting.com\/assets\/icons\/standard\/check-blue.svg\" alt=\"check mark\" width=\"24\" height=\"24\" \/>Free Domain &amp; SSL Certificates    <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/design.inmotionhosting.com\/assets\/icons\/standard\/check-blue.svg\" alt=\"check mark\" width=\"24\" height=\"24\" \/>Unlimited Bandwidth    <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/design.inmotionhosting.com\/assets\/icons\/standard\/check-blue.svg\" alt=\"check mark\" width=\"24\" height=\"24\" \/>400+ One-Click Applications    <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/design.inmotionhosting.com\/assets\/icons\/standard\/check-blue.svg\" alt=\"check mark\" width=\"24\" height=\"24\" \/>USA &amp; European Data Centers<\/p>\r\n<p><a class=\"btn btn-primary btn-lg\" href=\"https:\/\/www.inmotionhosting.com\/shared-hosting\">Shared Hosting Plans<\/a><\/p>\r\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>One of the more common ways to emphasize text in a Joomla 4.0 site is to use Bootstrap 5 alerts. Alerts give you a different text look, background, and in some cases even adds a small graphic. This article will provide the code and examples of how you can add alerts to your Joomla content.<a class=\"moretag\" href=\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/bootstrap5-alerts-joomla4\/\"> Read More ><\/a><\/p>\n","protected":false},"author":57014,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[4496],"tags":[],"class_list":["post-89440","post","type-post","status-publish","format-standard","hentry","category-joomla-4"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.1.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How to Use Bootstrap 5.0 Alerts in Joomla 4.0 | InMotion Hosting<\/title>\n<meta name=\"description\" content=\"This article will provide the code and examples of how you can add Bootstrap 5 alerts to your Joomla content.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/bootstrap5-alerts-joomla4\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Use Bootstrap 5.0 Alerts in Joomla 4.0\" \/>\n<meta property=\"og:description\" content=\"This article will provide the code and examples of how you can add Bootstrap 5 alerts to your Joomla content.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/bootstrap5-alerts-joomla4\/\" \/>\n<meta property=\"og:site_name\" content=\"InMotion Hosting Support Center\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/inmotionhosting\/\" \/>\n<meta property=\"article:published_time\" content=\"2021-10-02T03:13:50+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-11-16T18:24:03+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/11\/Bootstrap-Alerts-in-Joomla-4.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"InMotion Hosting Contributor\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@https:\/\/twitter.com\/InMotionHosting\" \/>\n<meta name=\"twitter:site\" content=\"@InMotionHosting\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"InMotion Hosting Contributor\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/bootstrap5-alerts-joomla4\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/bootstrap5-alerts-joomla4\/\"},\"author\":{\"name\":\"InMotion Hosting Contributor\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/f9a4fc454cd1df128ee8e898d30d4644\"},\"headline\":\"How to Use Bootstrap 5.0 Alerts in Joomla 4.0\",\"datePublished\":\"2021-10-02T03:13:50+00:00\",\"dateModified\":\"2023-11-16T18:24:03+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/bootstrap5-alerts-joomla4\/\"},\"wordCount\":856,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/bootstrap5-alerts-joomla4\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/11\/Bootstrap-Alerts-in-Joomla-4-1024x538.png\",\"articleSection\":[\"Joomla 4\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/bootstrap5-alerts-joomla4\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/bootstrap5-alerts-joomla4\/\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/bootstrap5-alerts-joomla4\/\",\"name\":\"How to Use Bootstrap 5.0 Alerts in Joomla 4.0 | InMotion Hosting\",\"isPartOf\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/bootstrap5-alerts-joomla4\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/bootstrap5-alerts-joomla4\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/11\/Bootstrap-Alerts-in-Joomla-4-1024x538.png\",\"datePublished\":\"2021-10-02T03:13:50+00:00\",\"dateModified\":\"2023-11-16T18:24:03+00:00\",\"description\":\"This article will provide the code and examples of how you can add Bootstrap 5 alerts to your Joomla content.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/bootstrap5-alerts-joomla4\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/bootstrap5-alerts-joomla4\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/bootstrap5-alerts-joomla4\/#primaryimage\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/11\/Bootstrap-Alerts-in-Joomla-4.png\",\"contentUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/11\/Bootstrap-Alerts-in-Joomla-4.png\",\"width\":1200,\"height\":630,\"caption\":\"Bootstrap Alerts in Joomla 4\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/bootstrap5-alerts-joomla4\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.inmotionhosting.com\/support\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Use Bootstrap 5.0 Alerts in Joomla 4.0\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#website\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/\",\"name\":\"InMotion Hosting Support Center\",\"description\":\"Web Hosting Support &amp; Tutorials\",\"publisher\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.inmotionhosting.com\/support\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\",\"name\":\"InMotion Hosting\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg\",\"contentUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg\",\"width\":696,\"height\":696,\"caption\":\"InMotion Hosting\"},\"image\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/inmotionhosting\/\",\"https:\/\/x.com\/InMotionHosting\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/f9a4fc454cd1df128ee8e898d30d4644\",\"name\":\"InMotion Hosting Contributor\",\"description\":\"InMotion Hosting contributors are highly knowledgeable individuals who create relevant content on new trends and troubleshooting techniques to help you achieve your online goals!\",\"sameAs\":[\"https:\/\/www.linkedin.com\/company\/inmotion-hosting\/\",\"https:\/\/x.com\/https:\/\/twitter.com\/InMotionHosting\"],\"url\":\"https:\/\/www.inmotionhosting.com\/support\/author\/inmotion-hosting-contributor\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Use Bootstrap 5.0 Alerts in Joomla 4.0 | InMotion Hosting","description":"This article will provide the code and examples of how you can add Bootstrap 5 alerts to your Joomla content.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/bootstrap5-alerts-joomla4\/","og_locale":"en_US","og_type":"article","og_title":"How to Use Bootstrap 5.0 Alerts in Joomla 4.0","og_description":"This article will provide the code and examples of how you can add Bootstrap 5 alerts to your Joomla content.","og_url":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/bootstrap5-alerts-joomla4\/","og_site_name":"InMotion Hosting Support Center","article_publisher":"https:\/\/www.facebook.com\/inmotionhosting\/","article_published_time":"2021-10-02T03:13:50+00:00","article_modified_time":"2023-11-16T18:24:03+00:00","og_image":[{"width":1200,"height":630,"url":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/11\/Bootstrap-Alerts-in-Joomla-4.png","type":"image\/png"}],"author":"InMotion Hosting Contributor","twitter_card":"summary_large_image","twitter_creator":"@https:\/\/twitter.com\/InMotionHosting","twitter_site":"@InMotionHosting","twitter_misc":{"Written by":"InMotion Hosting Contributor","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/bootstrap5-alerts-joomla4\/#article","isPartOf":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/bootstrap5-alerts-joomla4\/"},"author":{"name":"InMotion Hosting Contributor","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/f9a4fc454cd1df128ee8e898d30d4644"},"headline":"How to Use Bootstrap 5.0 Alerts in Joomla 4.0","datePublished":"2021-10-02T03:13:50+00:00","dateModified":"2023-11-16T18:24:03+00:00","mainEntityOfPage":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/bootstrap5-alerts-joomla4\/"},"wordCount":856,"commentCount":0,"publisher":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#organization"},"image":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/bootstrap5-alerts-joomla4\/#primaryimage"},"thumbnailUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/11\/Bootstrap-Alerts-in-Joomla-4-1024x538.png","articleSection":["Joomla 4"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/bootstrap5-alerts-joomla4\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/bootstrap5-alerts-joomla4\/","url":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/bootstrap5-alerts-joomla4\/","name":"How to Use Bootstrap 5.0 Alerts in Joomla 4.0 | InMotion Hosting","isPartOf":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/bootstrap5-alerts-joomla4\/#primaryimage"},"image":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/bootstrap5-alerts-joomla4\/#primaryimage"},"thumbnailUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/11\/Bootstrap-Alerts-in-Joomla-4-1024x538.png","datePublished":"2021-10-02T03:13:50+00:00","dateModified":"2023-11-16T18:24:03+00:00","description":"This article will provide the code and examples of how you can add Bootstrap 5 alerts to your Joomla content.","breadcrumb":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/bootstrap5-alerts-joomla4\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/bootstrap5-alerts-joomla4\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/bootstrap5-alerts-joomla4\/#primaryimage","url":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/11\/Bootstrap-Alerts-in-Joomla-4.png","contentUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/11\/Bootstrap-Alerts-in-Joomla-4.png","width":1200,"height":630,"caption":"Bootstrap Alerts in Joomla 4"},{"@type":"BreadcrumbList","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/bootstrap5-alerts-joomla4\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.inmotionhosting.com\/support\/"},{"@type":"ListItem","position":2,"name":"How to Use Bootstrap 5.0 Alerts in Joomla 4.0"}]},{"@type":"WebSite","@id":"https:\/\/www.inmotionhosting.com\/support\/#website","url":"https:\/\/www.inmotionhosting.com\/support\/","name":"InMotion Hosting Support Center","description":"Web Hosting Support &amp; Tutorials","publisher":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.inmotionhosting.com\/support\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.inmotionhosting.com\/support\/#organization","name":"InMotion Hosting","url":"https:\/\/www.inmotionhosting.com\/support\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/","url":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg","contentUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg","width":696,"height":696,"caption":"InMotion Hosting"},"image":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/inmotionhosting\/","https:\/\/x.com\/InMotionHosting"]},{"@type":"Person","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/f9a4fc454cd1df128ee8e898d30d4644","name":"InMotion Hosting Contributor","description":"InMotion Hosting contributors are highly knowledgeable individuals who create relevant content on new trends and troubleshooting techniques to help you achieve your online goals!","sameAs":["https:\/\/www.linkedin.com\/company\/inmotion-hosting\/","https:\/\/x.com\/https:\/\/twitter.com\/InMotionHosting"],"url":"https:\/\/www.inmotionhosting.com\/support\/author\/inmotion-hosting-contributor\/"}]}},"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"primary_category":{"id":4496,"name":"Joomla 4","slug":"joomla-4","link":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/"},"_links":{"self":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/89440","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/users\/57014"}],"replies":[{"embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/comments?post=89440"}],"version-history":[{"count":9,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/89440\/revisions"}],"predecessor-version":[{"id":107928,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/89440\/revisions\/107928"}],"wp:attachment":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/media?parent=89440"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/categories?post=89440"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/tags?post=89440"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}