How to Use Bootstrap 5.0 Alerts in Joomla 4.0

bootstrap alerts joomla4

One of the more common ways to emphasize text in a Joomla 4.0 site is to use Bootstrap’s 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.

Need a home for your newly created Joomla 4.0 website? Check InMotion’s Managed VPS solutions! 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.

    Toggle Editor
  5. Type in or paste in the code that you want to use.

    Add code in text editor
  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.

    preview of added code

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>
primary alert

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>
secondary alert 1

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>
success alert

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>
danger alert

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>
warning alert

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>
info alert

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>
light alert

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>
dark alert

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

example collapse red text

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>
example icon with alert

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>
assistive example green

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.

Launch your web presence quickly and easily with Shared Hosting. Our user-friendly hosting is perfect for everyone, providing the fastest shared hosting experience possible, all powered by cPanel.

check markFree Domain    check markFree SSL Certificates    check markUnlimited Bandwidth    check mark400+ One-Click Applications

View Shared Hosting Plans

AC
Arnel Custodio Content Writer I

As a writer for InMotion Hosting, Arnel has always aimed to share helpful information and provide knowledge that will help solve problems and aid in achieving goals. He's also been active with WordPress local community groups and events since 2004.

More Articles by Arnel

Comments

It looks like this article doesn't have any comments yet - you can be the first. If you have any comments or questions, start the conversation!

Was this article helpful? Let us know!