diff --git a/docs/ui/components/alerts.mdx b/docs/ui/components/alerts.mdx
index dfb18ebb0..80ae58f7d 100644
--- a/docs/ui/components/alerts.mdx
+++ b/docs/ui/components/alerts.mdx
@@ -120,7 +120,7 @@ Add the `x` close button to make an alert modal dismissible. Thanks to that, you
-
+
@@ -204,7 +204,7 @@ Add an icon to your alert modal to make it more user-friendly and help users eas
-
+
@@ -216,7 +216,7 @@ Add an icon to your alert modal to make it more user-friendly and help users eas
-
+
@@ -228,7 +228,7 @@ Add an icon to your alert modal to make it more user-friendly and help users eas
-
+
@@ -240,7 +240,7 @@ Add an icon to your alert modal to make it more user-friendly and help users eas
-
+
@@ -381,7 +381,7 @@ If you want your alert to be really eye-catching, you can add a class `alert-imp
-
+
@@ -393,7 +393,7 @@ If you want your alert to be really eye-catching, you can add a class `alert-imp
-
+
@@ -405,7 +405,7 @@ If you want your alert to be really eye-catching, you can add a class `alert-imp
-
+
@@ -417,7 +417,7 @@ If you want your alert to be really eye-catching, you can add a class `alert-imp
-
+
diff --git a/docs/ui/components/avatars.mdx b/docs/ui/components/avatars.mdx
index 44a32f394..bd27eb847 100644
--- a/docs/ui/components/avatars.mdx
+++ b/docs/ui/components/avatars.mdx
@@ -66,7 +66,7 @@ Apart from pictures and initials, you can also use icons to make the avatars mor
```html
-
+
```
diff --git a/docs/ui/components/breadcrumb.mdx b/docs/ui/components/breadcrumb.mdx
index 0ed060a5c..03e00e8ba 100644
--- a/docs/ui/components/breadcrumb.mdx
+++ b/docs/ui/components/breadcrumb.mdx
@@ -96,7 +96,7 @@ If you wish to use breadcrumbs in headers, place them above the headers.
-
+
Edit
Publish
diff --git a/docs/ui/components/buttons.mdx b/docs/ui/components/buttons.mdx
index 0482a11b5..9546d6d48 100644
--- a/docs/ui/components/buttons.mdx
+++ b/docs/ui/components/buttons.mdx
@@ -335,12 +335,12 @@ You can use the icons of popular social networking sites, which users are famili
```html
-
+
Facebook
-
+
Twitter
@@ -511,59 +511,59 @@ You can also add an icon without the name of a social networking site, if you wa
```html
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
```
@@ -631,31 +631,31 @@ Add the `.btn-icon` class to remove unnecessary padding from your button and use
```html
-
+
-
+
-
+
-
+
-
+
-
+
-
+
```
@@ -707,7 +707,7 @@ Create a dropdown button that will encourage users to click for more options. Yo
```html
@@ -721,7 +721,7 @@ Create a dropdown button that will encourage users to click for more options. Yo
diff --git a/docs/ui/components/empty.mdx b/docs/ui/components/empty.mdx
index 8334ead5f..5a9c52a1f 100644
--- a/docs/ui/components/empty.mdx
+++ b/docs/ui/components/empty.mdx
@@ -94,7 +94,7 @@ Instead of adding an icon or illustration you can simply give the text:
-
+
Take me home
diff --git a/docs/ui/components/icons.mdx b/docs/ui/components/icons.mdx
index 7ad31ffd8..958c2f5fc 100644
--- a/docs/ui/components/icons.mdx
+++ b/docs/ui/components/icons.mdx
@@ -109,12 +109,12 @@ banner: icons
```
```html
-
+
-
+
-
+
```
diff --git a/docs/ui/components/ribbons.mdx b/docs/ui/components/ribbons.mdx
index 109d51c18..91bf9bbc2 100644
--- a/docs/ui/components/ribbons.mdx
+++ b/docs/ui/components/ribbons.mdx
@@ -25,7 +25,7 @@ Use the `ribbon` class to add the default ribbon to any section of your interfac
-
+
@@ -60,7 +60,7 @@ Using multiple classes at once will give you more position options. For example,
-
+
@@ -88,7 +88,7 @@ Customize the ribbon's background color. You can click [here](/docs/ui/colors) t
-
+
@@ -116,7 +116,7 @@ Add your own text to a ribbon to display any additional information and make it
-
+
@@ -144,7 +144,7 @@ Change the style of a ribbon to make it go well with your interface design.
-
+
diff --git a/docs/ui/components/timelines.mdx b/docs/ui/components/timelines.mdx
index 2abafbe91..5053af6f2 100644
--- a/docs/ui/components/timelines.mdx
+++ b/docs/ui/components/timelines.mdx
@@ -147,7 +147,7 @@ The available timeline design is comprised of many components that will help you
```html
-
+
@@ -159,7 +159,7 @@ The available timeline design is comprised of many components that will help you
-
+
@@ -171,7 +171,7 @@ The available timeline design is comprised of many components that will help you
-
+
@@ -183,7 +183,7 @@ The available timeline design is comprised of many components that will help you
-
+
@@ -195,7 +195,7 @@ The available timeline design is comprised of many components that will help you
-
+
@@ -214,7 +214,7 @@ The available timeline design is comprised of many components that will help you
-
+
@@ -239,7 +239,7 @@ The available timeline design is comprised of many components that will help you
-
+
@@ -398,7 +398,7 @@ Use a simplified version of the timeline, if it suits your design better. You ca
```html
-
+
@@ -410,7 +410,7 @@ Use a simplified version of the timeline, if it suits your design better. You ca
-
+
@@ -422,7 +422,7 @@ Use a simplified version of the timeline, if it suits your design better. You ca
-
+
@@ -434,7 +434,7 @@ Use a simplified version of the timeline, if it suits your design better. You ca
-
+
@@ -446,7 +446,7 @@ Use a simplified version of the timeline, if it suits your design better. You ca
-
+
@@ -465,7 +465,7 @@ Use a simplified version of the timeline, if it suits your design better. You ca
-
+
@@ -490,7 +490,7 @@ Use a simplified version of the timeline, if it suits your design better. You ca
-
+
diff --git a/docs/ui/forms/form-elements.mdx b/docs/ui/forms/form-elements.mdx
index 24d7bf6d0..510469d5f 100644
--- a/docs/ui/forms/form-elements.mdx
+++ b/docs/ui/forms/form-elements.mdx
@@ -48,7 +48,7 @@ Use the `form-control-rounded` class if you prefer form controls with rounded co