{"id":88825,"date":"2021-09-17T23:48:26","date_gmt":"2021-09-18T03:48:26","guid":{"rendered":"https:\/\/www.inmotionhosting.com\/support\/?p=88825"},"modified":"2021-11-22T14:49:24","modified_gmt":"2021-11-22T19:49:24","slug":"bootstrap5-badges","status":"publish","type":"post","link":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/bootstrap5-badges\/","title":{"rendered":"Badges with BootStrap 5.0 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\/2021\/09\/badges-boostrap-joomla4-1024x538.jpg\" alt=\"Badges with Bootstrap 5.0 in Joomla 4.0\" class=\"wp-image-88831\" srcset=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/badges-boostrap-joomla4-1024x538.jpg 1024w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/badges-boostrap-joomla4-300x158.jpg 300w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/badges-boostrap-joomla4-768x403.jpg 768w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/badges-boostrap-joomla4.jpg 1200w\" sizes=\"auto, (min-width: 1360px) 876px, (min-width: 960px) calc(61.58vw + 51px), calc(100vw - 80px)\" \/><\/figure>\n\n\n\n<p>Badges are a way to add a little bit of emphasis to your text content.  You can easily use them wherever you have text in your Joomla content.  This article will briefly show you how to use badges through Bootstrap 5.0 in your Joomla 4.0 content.<\/p>\n\n\n\n<p class=\"alert alert-warning\">What is <a href=\"https:\/\/getbootstrap.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Bootstrap<\/a>?\u00a0 Bootstrap is an HTML, CSS, and JS framework used to build responsive websites that are designed to work with mobile devices. Bootstrap 5.0 is included with the Joomla 4.0 installation!<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"#badge-definition\">What are Badges?<\/a><\/li><li><a href=\"#adding-code\">Adding the Code in the Editor<\/a><\/li><li><a href=\"#sizes\">Badge Sizes<\/a><\/li><li><a href=\"#badge-colors\">Different Badge Colors<\/a><\/li><li><a href=\"#badge-text\">Badge Text \u2013 Light or Dark<\/a><\/li><li><a href=\"#buttons\">Badges in <\/a><a href=\"#badges-buttons\">Buttons<\/a><\/li><li><a href=\"#positioning\">Positioning a Badge in a Button<\/a><\/li><li><a href=\"#badges-pill\">Pill Shaped Badges<\/a><\/li><li><a href=\"#assistive-tech\">Using Badge Code with Assistive Technologies<\/a><\/li><\/ul>\n\n\n\n<p class=\"alert alert-info\">Looking for a new server to host your Joomla site?  Look no further than InMotion\u2019s <a href=\"https:\/\/www.inmotionhosting.com\/vps-hosting\">VPS server hosting<\/a> solutions!  You\u2019ll find a performance-oriented server made for your budget!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"badge-definition\">What are Badges?<\/h2>\n\n\n\n<p>A badge is simply a highlighted piece of text.  You can use it to emphasize a comment or point, or just to make the text appear a little different from what surrounds it.  You can also use badges as part of a counter, and position where the badge will be displayed, or change the shape and color of the badge.  Here are examples of all the badge types in this article:<br><\/p>\n\n\n\n<div class=\"wp-block-media-text alignwide is-stacked-on-mobile\" style=\"grid-template-columns:22% auto\"><figure class=\"wp-block-media-text__media\"><img loading=\"lazy\" decoding=\"async\" width=\"280\" height=\"57\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/10\/h1-badge-example.jpg\" alt=\"\" class=\"wp-image-89957 size-full\"><\/figure><div class=\"wp-block-media-text__content\">\n<p class=\"has-medium-font-size\">Text highlighted with a badge<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-media-text alignwide is-stacked-on-mobile\" style=\"grid-template-columns:22% auto\"><figure class=\"wp-block-media-text__media\"><a href=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/10\/badge-button-number-highlight.jpg\"><img loading=\"lazy\" decoding=\"async\" width=\"137\" height=\"56\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/10\/badge-button-number-highlight.jpg\" alt=\"\" class=\"wp-image-89958 size-full\"><\/a><\/figure><div class=\"wp-block-media-text__content\">\n<p class=\"has-medium-font-size\">A number highlighted with a badge in button<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-media-text alignwide is-stacked-on-mobile\" style=\"grid-template-columns:22% auto\"><figure class=\"wp-block-media-text__media\"><a href=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/10\/position-badge-code-1.jpg\"><img loading=\"lazy\" decoding=\"async\" width=\"94\" height=\"65\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/10\/position-badge-code-1.jpg\" alt=\"\" class=\"wp-image-89959 size-full\"><\/a><\/figure><div class=\"wp-block-media-text__content\">\n<p class=\"has-medium-font-size\">Button with badge positioned in the top right corner<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-media-text alignwide is-stacked-on-mobile\" style=\"grid-template-columns:22% auto\"><figure class=\"wp-block-media-text__media\"><a href=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/10\/badge-type-no-text.jpg\"><img loading=\"lazy\" decoding=\"async\" width=\"78\" height=\"55\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/10\/badge-type-no-text.jpg\" alt=\"\" class=\"wp-image-89960 size-full\"><\/a><\/figure><div class=\"wp-block-media-text__content\">\n<p class=\"has-medium-font-size\">Button with badge positioned in the top right corner \u2013 no text<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-media-text alignwide is-stacked-on-mobile\" style=\"grid-template-columns:23% auto\"><figure class=\"wp-block-media-text__media\"><a href=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/10\/badge-type-pill.jpg\"><img loading=\"lazy\" decoding=\"async\" width=\"71\" height=\"37\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/10\/badge-type-pill.jpg\" alt=\"\" class=\"wp-image-89961 size-full\"><\/a><\/figure><div class=\"wp-block-media-text__content\">\n<p class=\"has-medium-font-size\">Pill shaped badge<\/p>\n<\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"adding-the-code\">Adding the Code in the Editor<\/h2>\n\n\n\n<p>The code to create a badge is very simple.  Follow the steps below to add the code in the Joomla editor. Anytime you\u2019re using bootstrap code, you will be using the editor with these steps to add it:<\/p>\n\n\n\n<ol class=\"article_list wp-block-list\"><li>Login to the Joomla Administrator.<\/li><li>Open an existing article or create a new one.<\/li><li>When the editor is open, click on the <strong>Toggle <\/strong>button in the bottom right corner.<br><br><img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"458\" class=\"wp-image-88863\" style=\"width: 1000px;\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/editor-toggled.jpg\" alt=\"Joomla editor toggled\" srcset=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/editor-toggled.jpg 1600w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/editor-toggled-300x137.jpg 300w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/editor-toggled-1024x468.jpg 1024w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/editor-toggled-768x351.jpg 768w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/editor-toggled-1536x703.jpg 1536w\" sizes=\"auto, (min-width: 1360px) 876px, (min-width: 960px) calc(61.58vw + 51px), calc(100vw - 80px)\" \/><br><\/li><li>Get the code.  In this case, you can you can copy the code below.  <pre class=\"wp-block-code\"><code>&lt;h2&gt;Example of a &lt;span class=\"badge bg-primary\"&gt;badge&lt;\/span&gt;&lt;\/h2&gt;<\/code><\/pre><\/li><li>When you have the code in the editor, click on the <strong>Save<\/strong> button at the top of the editor.  This will save your entries in the editor. <br><br><br><img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"747\" class=\"wp-image-89962\" style=\"width: 1000px;\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/add-badge-code-joomla-editor.jpg\" alt=\"code in Joomla text editor\" srcset=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/add-badge-code-joomla-editor.jpg 929w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/add-badge-code-joomla-editor-300x224.jpg 300w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/add-badge-code-joomla-editor-768x574.jpg 768w\" sizes=\"auto, (min-width: 1360px) 876px, (min-width: 960px) calc(61.58vw + 51px), calc(100vw - 80px)\" \/><br><br><br><\/li><li>Next, click on the <strong>Preview <\/strong>button at the top of the editor.  Choose to open it in a new tab.<br><br><img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"591\" class=\"wp-image-88865\" style=\"width: 1000px;\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/click-preview-button.jpg\" alt=\"Preview button\" srcset=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/click-preview-button.jpg 788w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/click-preview-button-300x177.jpg 300w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/click-preview-button-768x454.jpg 768w\" sizes=\"auto, (min-width: 1360px) 876px, (min-width: 960px) calc(61.58vw + 51px), calc(100vw - 80px)\" \/><br>The preview will let you see how the code will appear when the article is published. Here\u2019s an example of the preview of the article:<br><br><img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"362\" class=\"wp-image-88880\" style=\"width: 1000px;\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/example-badge-joomla-preview.jpg\" alt=\"example of badge code using Joomla preview\" srcset=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/example-badge-joomla-preview.jpg 875w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/example-badge-joomla-preview-300x109.jpg 300w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/example-badge-joomla-preview-768x278.jpg 768w\" sizes=\"auto, (min-width: 1360px) 876px, (min-width: 960px) calc(61.58vw + 51px), calc(100vw - 80px)\" \/><br><br><\/li><\/ol>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"sizes\">Badge Sizes<\/h2>\n\n\n\n<p>The code used in the example above shows an example of a \u201cprimary-badge\u201d with text set as &lt;h2&gt; (title text).  You can vary the size of the badge using different \u201ch\u201d tags as long as you wrap the span code with the \u201ch\u201d tag that you wish to use.  For example:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;h1&gt;The text and &lt;span class=\"badge bg-info\"&gt;badge&lt;\/span&gt; are affected by the tag.&lt;\/h1&gt;<\/code><\/pre>\n\n\n\n<p>This code will appear like this:<\/p>\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\/09\/tag-example-h1.jpg\"><img loading=\"lazy\" decoding=\"async\" width=\"734\" height=\"69\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/tag-example-h1.jpg\" alt=\"H1 tag wraps the text and badge code so that the text and badge are sized as H1\" class=\"wp-image-88879\" srcset=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/tag-example-h1.jpg 734w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/tag-example-h1-300x28.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>You can see that both the text and the badge are sized per the \u201ch\u201d tag.  You can change the size of the badge using \u201ch\u201d tags from h1 (largest) to h6 (smallest).<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"badge-colors\">Different Badge Colors<\/h2>\n\n\n\n<p>There are 8 main colors that you can change the badge colors to using a \u201cbg\u201d option. \u201cBG\u201d stands for Background.  This is a list of all the colors that are a part of the badge code:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;span class=\"badge bg-primary\"&gt;Badge Primary&lt;\/span&gt;\n&lt;span class=\"badge bg-secondary\"&gt;Badge Secondary&lt;\/span&gt;\n&lt;span class=\"badge bg-success\"&gt;Badge Success&lt;\/span&gt;\n&lt;span class=\"badge bg-danger\"&gt;Badge Danger&lt;\/span&gt;\n&lt;span class=\"badge bg-warning text-dark\"&gt;Badge Warning&lt;\/span&gt;\n&lt;span class=\"badge bg-info text-dark\"&gt;Badge Primary&lt;\/span&gt;\n&lt;span class=\"badge bg-light text-dark\"&gt;Badge Light&lt;\/span&gt;\n&lt;span class=\"badge bg-dark\"&gt;Badge Dark&lt;\/span&gt;\n<\/code><\/pre>\n\n\n\n<p>The resulting code will show you all of the badge colors:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized is-style-default\"><a href=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/8-badge-colors.jpg\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/8-badge-colors.jpg\" alt=\"8 Badge colors\" class=\"wp-image-88878\" width=\"878\" height=\"64\" srcset=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/8-badge-colors.jpg 739w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/8-badge-colors-300x22.jpg 300w\" sizes=\"auto, (min-width: 1360px) 876px, (min-width: 960px) calc(61.58vw + 51px), calc(100vw - 80px)\" \/><\/a><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"badge-text\">Badge Text \u2013 Light or Dark<\/h2>\n\n\n\n<p>You can easily change the color of the badge and the badge text. You will want to change the badge text depending on the color that\u2019s being displayed for the badge. For example, if your badge color is light, then you will want the text in the badge to be dark so that it can be more easily read.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;h2&gt;&lt;span class=\"badge bg-light text-dark\"&gt;Light Badge with Dark text&lt;\/span&gt;&lt;\/h2&gt;<\/code><\/pre>\n\n\n\n<p>This code will show how the badge is a lighter color and the text is set to be dark:<\/p>\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\/09\/light-badge-dark-text.jpg\"><img loading=\"lazy\" decoding=\"async\" width=\"326\" height=\"65\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/light-badge-dark-text.jpg\" alt=\"\" class=\"wp-image-88876\" srcset=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/light-badge-dark-text.jpg 326w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/light-badge-dark-text-300x60.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 badge uses white text by default if you do not set \u201ctext-dark\u201d in the code.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"badges-buttons\">Badges in Buttons<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;button type=\"button\" class=\"btn btn-success\"&gt;\n     Notifications &lt;span class=\"badge bg-warning\"&gt;5&lt;\/span&gt;\n&lt;\/button&gt;<\/code><\/pre>\n\n\n\n<p>Badges can also be used to highlight text in a button.  For example, they are often used to highlight a count.<\/p>\n\n\n\n<p>When you add the code to the editor and then preview it, it will look like this:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized is-style-default\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/badge-in-button.jpg\" alt=\"Badge in button  - the 5 is the number of notifications in side the button code\" class=\"wp-image-88883\" width=\"208\" height=\"87\"><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"positioning\">Positioning the Badge in a Button<\/h2>\n\n\n\n<p>When you position a badge in a button, you are using the button code, position code, and badge code.  For the sake of simplicity, it\u2019s easiest to simply copy the provided code.  If you want to learn more about using the class position in Bootstrap 5, then please see their <a href=\"https:\/\/getbootstrap.com\/docs\/5.1\/utilities\/position\/\" target=\"_blank\" rel=\"noreferrer noopener\">Position documentation<\/a>.<\/p>\n\n\n\n<p>Here is the code to show a count for a notification in the top right corner.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;button type=\"button\" class=\"btn btn-primary position-relative\"&gt;\n  Inbox\n  &lt;span class=\"position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger\"&gt;\n    99+\n&lt;\/span&gt;\n&lt;\/button&gt;<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-full is-resized is-style-default\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/position-badge-code-1.jpg\" alt=\"This is an example of the position badge code - the badge is in the top right corner with a count of 99+\" class=\"wp-image-88884\" width=\"156\" height=\"108\"><\/figure>\n\n\n\n<p>If we go through the code line-by-line, you will see:<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>The first line is the button code \u2013 it includes a class to define the button color and position<\/li><li>\u201cInbox\u201d is the text inside the button<\/li><li>The span code includes the position of the bage, its centering (\u201ctranslate-middle\u201d), the shape of the badge and the color of the badge.<\/li><li>\u201c99+\u201d is the content of the badge<\/li><li>The last lines are simply closing the span and button code<\/li><\/ol>\n\n\n\n<p>You can see the button and how it is displayed with the badge in the screenshot above.  This is a default example, but you also use this type of badge to highlight the number of warnings or highlight a value with a percentage or even some text.  The use of positioned badges is limited by your needs and imagination!<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Positioned badge with no text<\/h3>\n\n\n\n<p>You can also use a badge with no text to bring attention to a button.  <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;button type=\"button\" class=\"btn btn-primary position-relative\"&gt;\n  Profile\n  &lt;span class=\"position-absolute top-0 start-100 translate-middle p-2 bg-danger border border-light rounded-circle\"&gt;\n  &lt;\/span&gt;\n&lt;\/button&gt;<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-full is-resized is-style-default\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/button-generic-badge.jpg\" alt=\"\" class=\"wp-image-88885\" width=\"133\" height=\"87\"><\/figure>\n\n\n\n<p>When you display this button you can see the circular red dot in the top right corner without any text.  This is simply a more generic way to bring attention to the button without having to use any embedded text.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"badges-pill\">Pill Shaped Badges<\/h2>\n\n\n\n<p>Badges can also be changed to have a more rounded shape that resembles a pill.  Using the code below you can easily change how the badge will appear.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;span class=\"badge rounded-pill bg-danger\"&gt;Danger&lt;\/span&gt;\n<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-full is-style-default\"><img loading=\"lazy\" decoding=\"async\" width=\"125\" height=\"75\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/pill-danger.jpg\" alt=\"\" class=\"wp-image-89148\"><\/figure>\n\n\n\n<p>The example above shows that the color options for the background (bg) remain the same for this code.  You can change the \u201cbg\u201d setting using the same settings that we listed in the <a href=\"#badge-colors\">different colors<\/a> section above. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"assistive-tech\">Using Badge Code Assistive Technologies<\/h2>\n\n\n\n<p>Using the code that changes the size, shape, color, and position of badges provides visual changes that will not be communicated through assistive technologies like screen readers.  In order to provide information about the badge color, shape, and\/or position, it is recommended that additional text is added when using the badge code.  <\/p>\n\n\n\n<p>You can use hidden text (\u201cvisually-hidden\u201d) in order to provide screen readers with a text-specific reference for the badge appearance.  In order to use hidden text, you can use the SPAN tag.  You would need to position the hidden text code immediately after the code that you\u2019re using for the badge.  For example:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;button type=\"button\" class=\"btn btn-primary position-relative\"&gt;\n  Profile\n  &lt;span class=\"position-absolute top-0 start-100 translate-middle p-2 bg-danger border border-light rounded-circle\"&gt;\n    <strong>&lt;span class=\"visually-hidden\"&gt;New alerts&lt;\/span&gt;<\/strong>\n  &lt;\/span&gt;\n&lt;\/button&gt;<\/code><\/pre>\n\n\n\n<p>Here you can see that the highlighted code indicates in text what the badge is displaying.  Note that only the badge will be displayed and the text remains hidden per the \u201cvisually hidden\u201d code in the span.<\/p>\n\n\n\n<p>That completes our tutorial on how to use badges in Joomla 4.0 using Bootstrap 5!  For more information, check our <a href=\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/\">Joomla education channel<\/a> in the InMotion Hosting Support Center!<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Badges are a way to add a little bit of emphasis to your text content. You can easily use them wherever you have text in your Joomla content. This article will briefly show you how to use badges through Bootstrap 5.0 in your Joomla 4.0 content. What is Bootstrap?\u00a0 Bootstrap is an HTML, CSS, and<a class=\"moretag\" href=\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/bootstrap5-badges\/\"> Read More ><\/a><\/p>\n","protected":false},"author":7,"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-88825","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>Badges with BootStrap 5.0 in Joomla 4.0 | InMotion Hosting<\/title>\n<meta name=\"description\" content=\"Learn how to use Badges in Joomla 4.0 articles to emphasize text\" \/>\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-badges\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Badges with BootStrap 5.0 in Joomla 4.0 | InMotion Hosting\" \/>\n<meta property=\"og:description\" content=\"Learn how to use Badges in Joomla 4.0 articles to emphasize text\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/bootstrap5-badges\/\" \/>\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-09-18T03:48:26+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-11-22T19:49:24+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/badges-boostrap-joomla4.jpg\" \/>\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\/jpeg\" \/>\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-badges\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/bootstrap5-badges\/\"},\"author\":{\"name\":\"InMotion Hosting Contributor\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/8d626175dd3b70ee90a172bdb09a460b\"},\"headline\":\"Badges with BootStrap 5.0 in Joomla 4.0\",\"datePublished\":\"2021-09-18T03:48:26+00:00\",\"dateModified\":\"2021-11-22T19:49:24+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/bootstrap5-badges\/\"},\"wordCount\":1220,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/bootstrap5-badges\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/badges-boostrap-joomla4-1024x538.jpg\",\"articleSection\":[\"Joomla 4\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/bootstrap5-badges\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/bootstrap5-badges\/\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/bootstrap5-badges\/\",\"name\":\"Badges with BootStrap 5.0 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-badges\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/bootstrap5-badges\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/badges-boostrap-joomla4-1024x538.jpg\",\"datePublished\":\"2021-09-18T03:48:26+00:00\",\"dateModified\":\"2021-11-22T19:49:24+00:00\",\"description\":\"Learn how to use Badges in Joomla 4.0 articles to emphasize text\",\"breadcrumb\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/bootstrap5-badges\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/bootstrap5-badges\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/bootstrap5-badges\/#primaryimage\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/badges-boostrap-joomla4.jpg\",\"contentUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/badges-boostrap-joomla4.jpg\",\"width\":1200,\"height\":630,\"caption\":\"Badges with Bootstrap 5.0 in Joomla 4.0\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/bootstrap5-badges\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.inmotionhosting.com\/support\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Badges with BootStrap 5.0 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\/8d626175dd3b70ee90a172bdb09a460b\",\"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\/arn\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Badges with BootStrap 5.0 in Joomla 4.0 | InMotion Hosting","description":"Learn how to use Badges in Joomla 4.0 articles to emphasize text","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-badges\/","og_locale":"en_US","og_type":"article","og_title":"Badges with BootStrap 5.0 in Joomla 4.0 | InMotion Hosting","og_description":"Learn how to use Badges in Joomla 4.0 articles to emphasize text","og_url":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/bootstrap5-badges\/","og_site_name":"InMotion Hosting Support Center","article_publisher":"https:\/\/www.facebook.com\/inmotionhosting\/","article_published_time":"2021-09-18T03:48:26+00:00","article_modified_time":"2021-11-22T19:49:24+00:00","og_image":[{"width":1200,"height":630,"url":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/badges-boostrap-joomla4.jpg","type":"image\/jpeg"}],"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-badges\/#article","isPartOf":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/bootstrap5-badges\/"},"author":{"name":"InMotion Hosting Contributor","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/8d626175dd3b70ee90a172bdb09a460b"},"headline":"Badges with BootStrap 5.0 in Joomla 4.0","datePublished":"2021-09-18T03:48:26+00:00","dateModified":"2021-11-22T19:49:24+00:00","mainEntityOfPage":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/bootstrap5-badges\/"},"wordCount":1220,"commentCount":0,"publisher":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#organization"},"image":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/bootstrap5-badges\/#primaryimage"},"thumbnailUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/badges-boostrap-joomla4-1024x538.jpg","articleSection":["Joomla 4"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/bootstrap5-badges\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/bootstrap5-badges\/","url":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/bootstrap5-badges\/","name":"Badges with BootStrap 5.0 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-badges\/#primaryimage"},"image":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/bootstrap5-badges\/#primaryimage"},"thumbnailUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/badges-boostrap-joomla4-1024x538.jpg","datePublished":"2021-09-18T03:48:26+00:00","dateModified":"2021-11-22T19:49:24+00:00","description":"Learn how to use Badges in Joomla 4.0 articles to emphasize text","breadcrumb":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/bootstrap5-badges\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/bootstrap5-badges\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/bootstrap5-badges\/#primaryimage","url":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/badges-boostrap-joomla4.jpg","contentUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/badges-boostrap-joomla4.jpg","width":1200,"height":630,"caption":"Badges with Bootstrap 5.0 in Joomla 4.0"},{"@type":"BreadcrumbList","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/bootstrap5-badges\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.inmotionhosting.com\/support\/"},{"@type":"ListItem","position":2,"name":"Badges with BootStrap 5.0 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\/8d626175dd3b70ee90a172bdb09a460b","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\/arn\/"}]}},"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\/88825","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\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/comments?post=88825"}],"version-history":[{"count":13,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/88825\/revisions"}],"predecessor-version":[{"id":92344,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/88825\/revisions\/92344"}],"wp:attachment":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/media?parent=88825"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/categories?post=88825"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/tags?post=88825"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}