How to Use Bootstrap 5.0 Alerts in Joomla 4.0

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.

• How to add Bootstrap 5.0 Code in Joomla 4.0
• Examples of Different Alert Types
• Triggering Alerts
• Alerts with Icons
• Working with Assistive Technologies

Need a home for your newly created Joomla 4.0 website? Check InMotion’s VPS hosting services! You’ll find secure servers tailored to meet your budget needs!

How to add Bootstrap 5.0 Code in Joomla 4.0

When you’re working in Joomla, adding the code is very simple. Here’s a quick example of you how you would add the code using the Joomla 4.0 editor:

1. Log into the Joomla Administrator Dashboard.
2. Click on Content in the main menu.
3. Add a new article or edit an existing one. This will put you into the Joomla content editor.
4. Click on Toggle Editor in the bottom right corner of the editor. This will place the editor in text mode. You should only add code in this mode.
   
   
   
5. Type in or paste in the code that you want to use.
   
   
   
6. Once you have the code added, click on Save or Save & Close in the top left corner of the editor to save your changes.
7. 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 Preview. The code is highlighted by a red box.
   
   
   

Examples of Different Alert Types

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.

You can apply alert types to text using DIV, H, P, and span tags. The format is the same from tag to tag.

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.

Primary alert

<div class="alert alert-primary" role="alert">
  This is a primary alert!
</div>

The primary alert has a light blue background with the font being a darker blue.

Secondary Alert

<div class="alert alert-secondary" role="alert">
  This is a secondary alert!
</div>

The secondary alert has a light gray background and the type is displayed in a dark gray.

Success Alert

<div class="alert alert-success" role="alert">
  This is a success alert!
</div>

The success alert has a light green background and the type is dark green.

Danger Alert

<div class="alert alert-danger" role="alert">
 This is a danger alert!
</div>

The danger alert has a lighter red background and a dark red font.

Warning Alert

<div class="alert alert-warning" role="alert">
  This is a warning alert!
</div>

The warning alert has an amber background and dark brown type.

Info Alert

<div class="alert alert-info" role="alert">
  Thi is an info alert!
</div>

The info alert has a light blue background and the type is a dark blue.

Light Alert

<div class="alert alert-light" role="alert">
  This is a light alert!
</div>

Although it’s hard to see, there is a slightly darker background (almost white) and the type appears to be a dark gray.

Dark Alert

<div class="alert alert-dark" role="alert">
  This is a dark alert!
</div>

The dark alert has a darker gray background and the type is almost black.

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.

Triggering Alerts

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>
  <a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Link with href
  </a>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Button with data-bs-target
  </button>
</p>
<div class="collapse" id="collapseExample">
  <div class="card card-body">
    Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
  </div>
</div>

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

Alerts with Icons

Alerts can also make use of Bootstrap icons in order to provide a small flexible graphic that can bring more emphasis and meaning to your text.

Bootstrap Icons use the SVG format, allowing you to embed the image using HTML. Bootstrap Icons also have a width and height of 1em that can be changed by using different font sizes.

Here is an example of code with an alert using a graphic:

<div class="alert alert-primary d-flex align-items-center" role="alert">
  <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:">
    <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"/>
  </svg>
  <div>
    An example alert with an icon
  </div>
</div>

Using the code, you can add a small icon that will help to provide better emphasis for your text.

Working with Assistive Technologies

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’t 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 “visually-hidden” class. Here’s an example:

<div class="alert alert-success"> <p>You have succeeded in advancing!</p>
<span class="visually-hidden">success alert is being used and is colored green</span>
</div>

The text is generated with no issue, but the “visually-hidden” option is used to keep the text hidden.

To help your users who may be visually impaired and requires the use of assistive technologies, make sure to use the “visually-hidden” class to help provide the extra meaning that your colored alerts may hide.