Merge branch 'main' of https://github.com/coreui/coreui

mrholek · mrholek · commit 1f7d10ee1753 · 2025-06-17T15:57:41.000+02:00
diff --git a/README.md b/README.md
@@ -19,6 +19,20 @@
   <a href="https://coreui.io/blog/">Blog</a>
 </p>
 
+## CoreUI vs Bootstrap
+
+CoreUI is fully compatible with Bootstrap, but it’s more than just a theme or UI extension — it’s a professionally developed and maintained system that addresses many of the limitations developers face with Bootstrap alone.
+
+**Key differences between CoreUI and Bootstrap:**
+
+* ✅ **Framework-native versions** – CoreUI offers official libraries for [React.js](https://coreui.io/react/), [Vue.js](https://coreui.io/vue/), and [Angular](https://coreui.io/angular/), while Bootstrap depends on third-party community plugins for framework integration.
+* 👨‍💻 **Full-time maintained project** – CoreUI is not a community-only initiative. It’s developed by a dedicated, full-time team focused on long-term evolution and support.
+* 📦 **More built-in components** – CoreUI includes many components not present in Bootstrap by default, such as range sliders, multi-selects, and step-based form wizards.
+* 🛠️ **Sass Modules support today** – CoreUI already supports Sass Modules out of the box, a feature that Bootstrap plans to introduce in version 6.
+* 🌍 **Modern RTL/LTR support** – CoreUI uses CSS logical properties to provide seamless RTL and LTR layout support for multilingual and internationalized apps.
+* 🔒 **Long-Term Support (LTS)** – While Bootstrap 3 & 4 LTS is now a paid service via [HeroDevs](https://www.herodevs.com/support/nes-bootstrap?utm_source=Bootstrap_site&utm_medium=Banner&utm_campaign=v3and4_eol), CoreUI continues to offer long-term support without additional cost.
+
+Whether you're starting a new project or migrating from Bootstrap, CoreUI gives you a powerful upgrade path with more features, framework bindings, and peace of mind for long-term maintainability.
 
 ## Table of contents
 
diff --git a/docs/content/components/accordion.md b/docs/content/components/accordion.md
@@ -12,6 +12,10 @@ aliases:
 toc: true
 bootstrap: true
 other_frameworks: accordion
+# schema:
+#   description: Documentation and usage examples for Bootstrap Accordion component built with CoreUI.
+#   headline: Bootstrap Accordion Component – Usage & Examples
+#   keywords: Accordion, Bootstrap, Component, CoreUI
 ---
 
 ## How it works
@@ -166,4 +170,9 @@ Accordions use local CSS variables on .accordion for enhanced real-time customiz
 {{< scss-docs name="accordion-css-vars" file="scss/_accordion.scss" >}}
 
 ### SASS variables
+
 {{< scss-docs name="accordion-variables" file="scss/_variables.scss" >}}
+
+{{< markdown >}}
+{{< coreui-vs-bootstrap component="Accordion" >}}
+{{< /markdown >}}
diff --git a/docs/content/components/alerts.md b/docs/content/components/alerts.md
@@ -262,3 +262,7 @@ Used alongside `$alert-variants` to create contextual modifier classes for our a
 Loop that creates the modifier classes with the `alert-variant()` mixin.
 
 {{< scss-docs name="alert-modifiers" file="scss/_alert.scss" >}}
+
+{{< markdown >}}
+{{< coreui-vs-bootstrap component="Alert" >}}
+{{< /markdown >}}
diff --git a/docs/content/components/badge.md b/docs/content/components/badge.md
@@ -103,3 +103,7 @@ Badges use local CSS variables on `.badge` for enhanced real-time customization.
 ### SASS variables
 
 {{< scss-docs name="badge-variables" file="scss/_variables.scss" >}}
+
+{{< markdown >}}
+{{< coreui-vs-bootstrap component="Badge" >}}
+{{< /markdown >}}
diff --git a/docs/content/components/breadcrumb.md b/docs/content/components/breadcrumb.md
@@ -114,3 +114,6 @@ Breadcrumbs use local CSS variables on `.breadcrumb` for enhanced real-time cust
 
 {{< scss-docs name="breadcrumb-variables" file="scss/_variables.scss" >}}
 
+{{< markdown >}}
+{{< coreui-vs-bootstrap component="Breadcrumb" >}}
+{{< /markdown >}}
diff --git a/docs/content/components/button-group.md b/docs/content/components/button-group.md
@@ -270,3 +270,7 @@ Create a set of buttons that appear vertically stacked rather than horizontally.
   <label class="btn btn-outline-danger" for="vbtn-radio3">Radio 3</label>
 </div>
 {{< /example >}}
+
+{{< markdown >}}
+{{< coreui-vs-bootstrap component="Button Group" >}}
+{{< /markdown >}}
diff --git a/docs/content/components/buttons.md b/docs/content/components/buttons.md
@@ -359,3 +359,7 @@ There are three mixins for buttons: button and button outline variant mixins, pl
 Button variants (for regular and outline buttons) use their respective mixins with our `$theme-colors` map to generate the modifier classes in `scss/_buttons.scss`.
 
 {{< scss-docs name="btn-variant-loops" file="scss/_buttons.scss" >}}
+
+{{< markdown >}}
+{{< coreui-vs-bootstrap component="Button" >}}
+{{< /markdown >}}
diff --git a/docs/content/components/card.md b/docs/content/components/card.md
@@ -758,3 +758,6 @@ Cards use local CSS variables on `.card` for enhanced real-time customization. V
 
 {{< scss-docs name="card-variables" file="scss/_variables.scss" >}}
 
+{{< markdown >}}
+{{< coreui-vs-bootstrap component="Card" >}}
+{{< /markdown >}}
diff --git a/docs/content/components/carousel.md b/docs/content/components/carousel.md
@@ -393,3 +393,7 @@ Variables for all carousels:
 Variables for the [dark carousel](#dark-variant):
 
 {{< scss-docs name="carousel-dark-variables" file="scss/_variables.scss" >}}
+
+{{< markdown >}}
+{{< coreui-vs-bootstrap component="Carousel" >}}
+{{< /markdown >}}
diff --git a/docs/content/components/close-button.md b/docs/content/components/close-button.md
@@ -50,3 +50,7 @@ Add `data-coreui-theme="dark"` to the `.btn-close`, or to its parent element, to
 ### SASS variables
 
 {{< scss-docs name="close-variables" file="scss/_variables.scss" >}}
+
+{{< markdown >}}
+{{< coreui-vs-bootstrap component="Close Button" >}}
+{{< /markdown >}}
diff --git a/docs/content/components/collapse.md b/docs/content/components/collapse.md
@@ -204,3 +204,7 @@ myCollapsible.addEventListener('hidden.coreui.collapse', event => {
 Collapse transition classes can be found in `scss/_transitions.scss` as these are shared across multiple components (collapse and accordion).
 
 {{< scss-docs name="collapse-classes" file="scss/_transitions.scss" >}}
+
+{{< markdown >}}
+{{< coreui-vs-bootstrap component="Collapse" >}}
+{{< /markdown >}}
diff --git a/docs/content/components/dropdowns.md b/docs/content/components/dropdowns.md
@@ -1131,3 +1131,7 @@ Variables for the CSS-based carets that indicate a dropdown's interactivity:
 Mixins are used to generate the CSS-based carets and can be found in `scss/mixins/_caret.scss`.
 
 {{< scss-docs name="caret-mixins" file="scss/mixins/_caret.scss" >}}
+
+{{< markdown >}}
+{{< coreui-vs-bootstrap component="Dropdown" >}}
+{{< /markdown >}}
diff --git a/docs/content/components/list-group.md b/docs/content/components/list-group.md
@@ -503,3 +503,6 @@ Loop that generates the modifier classes with the `list-group-item-variant()` mi
 
 {{< scss-docs name="list-group-modifiers" file="scss/_list-group.scss" >}}
 
+{{< markdown >}}
+{{< coreui-vs-bootstrap component="List Group" >}}
+{{< /markdown >}}
diff --git a/docs/content/components/modal.md b/docs/content/components/modal.md
@@ -872,3 +872,7 @@ Modals use local CSS variables on `.modal` and `.modal-backdrop` for enhanced re
 [Responsive fullscreen modals](#fullscreen-modal) are generated via the `$breakpoints` map and a loop in `scss/_modal.scss`.
 
 {{< scss-docs name="modal-fullscreen-loop" file="scss/_modal.scss" >}}
+
+{{< markdown >}}
+{{< coreui-vs-bootstrap component="Modal" >}}
+{{< /markdown >}}
diff --git a/docs/content/components/navbar.md b/docs/content/components/navbar.md
@@ -816,3 +816,6 @@ Variables for the [dark navbar](#color-schemes):
 
 {{< scss-docs name="navbar-expand-loop" file="scss/_navbar.scss" >}}
 
+{{< markdown >}}
+{{< coreui-vs-bootstrap component="Navbar" >}}
+{{< /markdown >}}
diff --git a/docs/content/components/navs-tabs.md b/docs/content/components/navs-tabs.md
@@ -767,3 +767,7 @@ On the `.nav-underline-border` modifier class:
 ### SASS variables
 
 {{< scss-docs name="nav-variables" file="scss/_variables.scss" >}}
+
+{{< markdown >}}
+{{< coreui-vs-bootstrap component="Nav" >}}
+{{< /markdown >}}
diff --git a/docs/content/components/offcanvas.md b/docs/content/components/offcanvas.md
@@ -358,3 +358,7 @@ Offcanvas uses local CSS variables on `.offcanvas` for enhanced real-time custom
 ### SASS variables
 
 {{< scss-docs name="offcanvas-variables" file="scss/_variables.scss" >}}
+
+{{< markdown >}}
+{{< coreui-vs-bootstrap component="Offcanvas" >}}
+{{< /markdown >}}
diff --git a/docs/content/components/pagination.md b/docs/content/components/pagination.md
@@ -179,3 +179,7 @@ Pagination now uses local CSS variables on `.pagination` for enhanced real-time
 ### SASS mixins
 
 {{< scss-docs name="pagination-mixin" file="scss/mixins/_pagination.scss" >}}
+
+{{< markdown >}}
+{{< coreui-vs-bootstrap component="Pagination" >}}
+{{< /markdown >}}
diff --git a/docs/content/components/placeholders.md b/docs/content/components/placeholders.md
@@ -148,3 +148,7 @@ Animate placeholders with `.placeholder-glow` or `.placeholder-wave` to better c
 ### SASS variables
 
 {{< scss-docs name="placeholders" file="scss/_variables.scss" >}}
+
+{{< markdown >}}
+{{< coreui-vs-bootstrap component="Placeholder" >}}
+{{< /markdown >}}
diff --git a/docs/content/components/popovers.md b/docs/content/components/popovers.md
@@ -275,3 +275,7 @@ Popovers use local CSS variables on `.popover` for enhanced real-time customizat
 ### SASS variables
 
 {{< scss-docs name="popover-variables" file="scss/_variables.scss" >}}
+
+{{< markdown >}}
+{{< coreui-vs-bootstrap component="Popover" >}}
+{{< /markdown >}}
diff --git a/docs/content/components/progress.md b/docs/content/components/progress.md
@@ -243,3 +243,6 @@ Used for creating the CSS animations for `.progress-bar-animated`. Included in `
 
 {{< scss-docs name="progress-keyframes" file="scss/_progress.scss" >}}
 
+{{< markdown >}}
+{{< coreui-vs-bootstrap component="Progress" >}}
+{{< /markdown >}}
diff --git a/docs/content/components/scrollspy.md b/docs/content/components/scrollspy.md
@@ -321,3 +321,7 @@ firstScrollSpyEl.addEventListener('activate.coreui.scrollspy', () => {
   // do something...
 })
 ```
+
+{{< markdown >}}
+{{< coreui-vs-bootstrap component="Scrollspy" >}}
+{{< /markdown >}}
diff --git a/docs/content/components/spinners.md b/docs/content/components/spinners.md
@@ -215,3 +215,7 @@ Used for creating the CSS animations for our spinners. Included in `scss/_spinne
 [margin]:  {{< docsref "/utilities/spacing" >}}
 [sizing]:  {{< docsref "/utilities/sizing" >}}
 [text]:    {{< docsref "/utilities/text" >}}
+
+{{< markdown >}}
+{{< coreui-vs-bootstrap component="Spinner" >}}
+{{< /markdown >}}
diff --git a/docs/content/components/toasts.md b/docs/content/components/toasts.md
@@ -395,3 +395,7 @@ Toasts use local CSS variables on `.toast` for enhanced real-time customization.
 ### SASS variables
 
 {{< scss-docs name="toast-variables" file="scss/_variables.scss" >}}
+
+{{< markdown >}}
+{{< coreui-vs-bootstrap component="Toast" >}}
+{{< /markdown >}}
diff --git a/docs/content/components/tooltips.md b/docs/content/components/tooltips.md
@@ -303,3 +303,7 @@ Bootstrap tooltips utilize local CSS variables on `.tooltip` for improved real-t
 ### SASS variables
 
 {{< scss-docs name="tooltip-variables" file="scss/_variables.scss" >}}
+
+{{< markdown >}}
+{{< coreui-vs-bootstrap component="Tooltip" >}}
+{{< /markdown >}}
diff --git a/docs/content/forms/form-control.md b/docs/content/forms/form-control.md
@@ -193,3 +193,7 @@ Learn more about [support for datalist elements](https://caniuse.com/datalist).
 `$form-file-*` are for file input.
 
 {{< scss-docs name="form-file-variables" file="scss/_variables.scss" >}}
+
+{{< markdown >}}
+{{< coreui-vs-bootstrap component="Form Control" >}}
+{{< /markdown >}}
diff --git a/docs/content/forms/input-group.md b/docs/content/forms/input-group.md
@@ -319,3 +319,7 @@ Input groups include support for custom selects and custom file inputs. Browser
 
 ### SASS variables
 {{< scss-docs name="input-group-variables" file="scss/_variables.scss" >}}
+
+{{< markdown >}}
+{{< coreui-vs-bootstrap component="Input Group" >}}
+{{< /markdown >}}
diff --git a/docs/content/forms/range.md b/docs/content/forms/range.md
@@ -51,3 +51,7 @@ By default, range inputs "snap" to integer values. To change this, you can speci
 ### SASS variables
 
 {{< scss-docs name="form-range-variables" file="scss/_variables.scss" >}}
+
+{{< markdown >}}
+{{< coreui-vs-bootstrap component="Form Range" >}}
+{{< /markdown >}}
diff --git a/docs/content/forms/select.md b/docs/content/forms/select.md
@@ -83,3 +83,7 @@ Add the `disabled` boolean attribute on a select to give it a grayed out appeara
 ### SASS variables
 
 {{< scss-docs name="form-select-variables" file="scss/_variables.scss" >}}
+
+{{< markdown >}}
+{{< coreui-vs-bootstrap component="Form Select" >}}
+{{< /markdown >}}
diff --git a/docs/content/getting-started/introduction.md b/docs/content/getting-started/introduction.md
@@ -12,6 +12,21 @@ aliases:
 toc: true
 ---
 
+## CoreUI vs Bootstrap
+
+CoreUI is fully compatible with Bootstrap, but it’s more than just a theme or UI extension — it’s a professionally developed and maintained system that addresses many of the limitations developers face with Bootstrap alone.
+
+**Key differences between CoreUI and Bootstrap:**
+
+* ✅ **Framework-native versions** – CoreUI offers official libraries for [React.js](https://coreui.io/react/), [Vue.js](https://coreui.io/vue/), and [Angular](https://coreui.io/angular/), while Bootstrap depends on third-party community plugins for framework integration.
+* 👨‍💻 **Full-time maintained project** – CoreUI is not a community-only initiative. It’s developed by a dedicated, full-time team focused on long-term evolution and support.
+* 📦 **More built-in components** – CoreUI includes many components not present in Bootstrap by default, such as range sliders, multi-selects, and step-based form wizards.
+* 🛠️ **Sass Modules support today** – CoreUI already supports Sass Modules out of the box, a feature that Bootstrap plans to introduce in version 6.
+* 🌍 **Modern RTL/LTR support** – CoreUI uses CSS logical properties to provide seamless RTL and LTR layout support for multilingual and internationalized apps.
+* 🔒 **Long-Term Support (LTS)** – While Bootstrap 3 & 4 LTS is now a paid service via [HeroDevs](https://www.herodevs.com/support/nes-bootstrap?utm_source=Bootstrap_site&utm_medium=Banner&utm_campaign=v3and4_eol), CoreUI continues to offer long-term support without additional cost.
+
+Whether you're starting a new project or migrating from Bootstrap, CoreUI gives you a powerful upgrade path with more features, framework bindings, and peace of mind for long-term maintainability.
+
 ## Quick start
 
 Looking to quickly add CoreUI for Bootstrap to your project? Use jsDelivr, a free open source CDN. Using a package manager or need to download the source files? [Head to the downloads page]({{< docsref "/getting-started/download" >}}).
diff --git a/docs/layouts/partials/coreui-vs-bootstrap.html b/docs/layouts/partials/coreui-vs-bootstrap.html
@@ -0,0 +1,13 @@
+## CoreUI vs Bootstrap
+
+While this {{ .Get "component" }} component is fully compatible with Bootstrap and follows its core principles, CoreUI delivers a more complete solution for modern app development.
+
+**What sets CoreUI apart from Bootstrap?**
+
+- ✅ **Fully compatible with Bootstrap** – Built directly on Bootstrap, all classes and behaviors work as expected.
+- 🧠 **Framework-native versions** – CoreUI provides dedicated libraries for [React.js](https://coreui.io/react/), [Vue.js](https://coreui.io/vue/), and [Angular](https://coreui.io/angular/), unlike Bootstrap which relies on third-party plugins for JavaScript frameworks.
+- 👨‍💻 **Maintained by a full-time team** – CoreUI is developed as a professional product, not a volunteer-driven project.
+- 📦 **More built-in components** – Includes additional ready-to-use components like range sliders, multi-selects, steppers, etc.
+- 🛠️ **Sass Modules support today** – CoreUI already supports Sass Modules, which are planned for Bootstrap 6.
+- 🌍 **Better LTR/RTL support** – Uses modern CSS logical properties for seamless bidirectional layout support.
+- 🔒 **Free LTS (Long-Term Support)** – Bootstrap now offers LTS only via paid third parties like HeroDevs, while CoreUI continues to offer long-term support natively and for free.
diff --git a/docs/layouts/shortcodes/coreui-vs-bootstrap.html b/docs/layouts/shortcodes/coreui-vs-bootstrap.html
@@ -0,0 +1,18 @@
+## CoreUI vs Bootstrap
+
+While this {{ .Get "component" }} component is fully compatible with Bootstrap and follows its core principles, CoreUI delivers a more complete solution for modern app development.
+
+**What sets CoreUI apart from Bootstrap?**
+
+- ✅ **Fully compatible with Bootstrap** – Built directly on Bootstrap, all classes and behaviors work as expected.
+- 🧠 **Framework-native versions** – CoreUI provides dedicated libraries for [React.js](https://coreui.io/react/), [Vue.js](https://coreui.io/vue/), and [Angular](https://coreui.io/angular/), unlike Bootstrap which relies on third-party plugins for JavaScript frameworks.
+- 👨‍💻 **Maintained by a full-time team** – CoreUI is developed as a professional product, not a volunteer-driven project.
+- 📦 **More built-in components** – Includes additional ready-to-use components like range sliders, multi-selects, steppers, etc.
+- 🛠️ **Sass Modules support today** – CoreUI already supports Sass Modules, which are planned for Bootstrap 6.
+- 🌍 **Better LTR/RTL support** – Uses modern CSS logical properties for seamless bidirectional layout support.
+- 🔒 **LTS (Long-Term Support)** – Bootstrap now offers LTS only via paid third parties like HeroDevs, while CoreUI continues to offer long-term support natively and for free.
+
+Whether you're building internal tools, dashboards, or SaaS platforms — CoreUI combines the familiarity of Bootstrap with a more powerful, scalable, and production-ready ecosystem.
+
+👉 [Explore CoreUI Bootstrap Components](https://coreui.io/bootstrap/)  
+👉 [Compare CoreUI vs Bootstrap](https://coreui.io/bootstrap/docs/getting-started/introduction/#coreui-vs-bootstrap)
