Add Examples to README.md #3

README.md

@@ -1,5 +1,10 @@
 # Bootstrap Ratio Utilities
 
+> ### [Bootstrap ~5.3.0 Documentation on Ratios](https://getbootstrap.com/docs/5.3/helpers/ratio/#aspect-ratios)
+> [Aspect ratios](https://getbootstrap.com/docs/5.3/helpers/ratio/#aspect-ratios)
+> [Custom ratios](https://getbootstrap.com/docs/5.3/helpers/ratio/#custom-ratios)
+> [Sass maps for `$aspect-ratios`](https://getbootstrap.com/docs/5.3/helpers/ratio/#sass-maps)
+
 Having a Responsive Ratio Utility, which needed for switching ratios for media brackpoints.
 
 ```
@@ -28,3 +33,27 @@ or `custom_theme.base.scss`
 // Responsive ratio utility.
 @import "../node_modules/bootstrap-ratio-utilities/utilities/scss/responsive-ratio.scss";
 ```
+
+## Examples:
+
+**Example #1**
+```
+<div class="ratio ratio-4x3 ratio-16x9-sm">
+   <iframe src="https://youtube.com/embed/bTqVqk7FSmY?autoplay=1&mute=1" frameborder="0" allowtransparency="" width="1600" height="900" loading="lazy"></iframe>
+</div>
+```
+
+**Example #2**
+In case of having `21x9` in the `$aspect-ratios` aspect ratios array
+```
+<div class="varbase-video-player ratio ratio-4x3 ratio-16x9-sm ratio-21x9-xxl">
+   <iframe src="https://youtube.com/embed/bTqVqk7FSmY?autoplay=1&mute=1" frameborder="0" allowtransparency="" width="1600" height="900" loading="lazy"></iframe>
+</div>
+```
+
+**Example #3**
+```
+<div class="field field--name-field-media-image field--type-image ratio ratio-4x3 ratio-16x9-sm ratio-21x9-xxl">
+  <img src="https://raw.githubusercontent.com/Vardot/varbase_media_demo/10.0.0/content/file/coworking-1.jpg">
+</div>
+```