docs: add "use with Bootstrap"

Author: mrholek

packages/docs/content/components/accordion/bootstrap.mdx

@@ -0,0 +1,34 @@
+---
+title: React Bootstrap Accordion Component
+name: Accordion with Bootstrap Styling
+description: Learn how to create vertically collapsing Bootstrap-style accordions using CoreUI’s React components.
+route: /components/accordion/
+bootstrap_component: true
+---
+
+## How to use React Bootstrap Accordion component
+
+Use CoreUI's React components styled with Bootstrap to build interactive and collapsible accordion sections.
+
+<ExampleSnippet className="theme-bootstrap" component="AccordionExample" componentName="React Bootstrap Accordion" />
+
+### Flush style
+
+Add the `flush` prop to remove default borders, background colors, and border radius — making the accordion items align flush with their container, following Bootstrap’s visual style.
+
+<ExampleSnippet className="theme-bootstrap" component="AccordionFlushExample" componentName="React Bootstrap Accordion" />
+
+### Always open behavior
+
+Use the `alwaysOpen` property to keep multiple accordion items expanded at the same time, mimicking Bootstrap’s multiple-item open functionality.
+
+<ExampleSnippet className="theme-bootstrap" component="AccordionAlwaysOpenExample" componentName="React Bootstrap Accordion" />
+
+## API reference
+
+Refer to the API documentation for detailed descriptions of all the available props and components used to create Bootstrap-styled accordions in React.
+
+- [&lt;CAccordion /&gt;](./api/#caccordion)
+- [&lt;CAccordionBody /&gt;](./api/#caccordionbody)
+- [&lt;CAccordionHeader /&gt;](./api/#caccordionheader)
+- [&lt;CAccordionItem /&gt;](./api/#caccordionitem)

packages/docs/content/components/alert/bootstrap.mdx

@@ -0,0 +1,70 @@
+---
+title: React Bootstrap Alert Component
+name: Alert with Bootstrap Styling
+description: Learn how to use CoreUI’s React Alert component styled with Bootstrap for contextual feedback messages and dismissible UI alerts.
+menu: Components
+route: /components/alert/
+bootstrap_component: true
+---
+
+## How to use React Bootstrap Alert component
+
+CoreUI’s React Bootstrap Alerts provide contextual feedback messages for typical user interactions. Each alert supports Bootstrap-based colors and can include additional content and dismiss functionality.
+
+<ExampleSnippet className="theme-bootstrap" component="AlertExample" componentName="React Bootstrap Alert" />
+
+<Callout color="warning" type="colorAssistiveTechnologies" />
+
+### Live example
+
+Click the button below to display an alert (initially hidden), then dismiss it using the built-in close button — styled the Bootstrap way.
+
+<ExampleSnippet className="theme-bootstrap" component="AlertLiveExample" componentName="React Bootstrap Alert" />
+
+### Link color
+
+To include links inside your alert, use the `<CAlertLink>` component — it automatically adopts the contextual Bootstrap color of the parent alert.
+
+<ExampleSnippet className="theme-bootstrap" component="AlertLinkColorExample" componentName="React Bootstrap Alert" />
+
+### Additional content
+
+React Bootstrap Alerts can include extra structured content such as headings, paragraphs, and horizontal rules for enhanced readability.
+
+<ExampleSnippet className="theme-bootstrap" component="AlertAdditionalContentExample" componentName="React Bootstrap Alert" />
+
+### Icons
+
+Use CoreUI Icons and flexbox utilities to add icons to your alerts. Combine them with spacing utilities for precise layout control.
+
+<ExampleSnippet className="theme-bootstrap" component="AlertIcons1Example" componentName="React Bootstrap Alert" />
+
+Need more than one icon in your alert? CoreUI Icons can be stacked or arranged using flex utilities.
+
+<ExampleSnippet className="theme-bootstrap" component="AlertIcons2Example" componentName="React Bootstrap Alert" />
+
+### Solid style
+
+Add `variant="solid"` to give the alert a solid background color, in line with Bootstrap’s solid alert variants.
+
+<ExampleSnippet className="theme-bootstrap" component="AlertSolidExample" componentName="React Bootstrap Alert" />
+
+### Dismissing
+
+Use the `dismissible` prop to allow users to close the alert. This will completely remove it from the DOM.
+
+<ExampleSnippet className="theme-bootstrap" component="AlertDismissingExample" componentName="React Bootstrap Alert" />
+
+<Callout color="warning">
+  When an alert is dismissed, the element is completely removed from the page structure. If a
+  keyboard user dismisses the alert using the close button, their focus will suddenly be lost and,
+  depending on the browser, reset to the start of the page/document.
+</Callout>
+
+## API reference
+
+Review the API documentation for detailed information about the props available in the Bootstrap-styled React Alert component.
+
+- [&lt;CAlert /&gt;](./api/#calert)
+- [&lt;CAlertHeading /&gt;](./api/#calertheading)
+- [&lt;CAlertLink /&gt;](./api/#calertlink)

packages/docs/content/components/avatar/bootstrap.mdx

@@ -0,0 +1,55 @@
+---
+title: React Bootstrap Avatar Component
+name: Avatar with Bootstrap Styling
+description: Learn how to use CoreUI’s React Avatar component styled with Bootstrap to display profile images, icons, initials, and status indicators in a consistent and responsive design.
+route: /components/avatar/
+bootstrap_component: true
+---
+
+## Image avatars
+
+Use Bootstrap-styled React avatars to display user profile images in a circular format — ideal for representing user accounts and contacts.
+
+<ExampleSnippet className="theme-bootstrap" component="AvatarImage" componentName="React Bootstrap Avatar" />
+
+## Letter avatars
+
+Display user initials using letter-based avatars. A perfect fallback when images aren’t available, and still visually consistent with Bootstrap styling.
+
+<ExampleSnippet className="theme-bootstrap" component="AvatarLetter" componentName="React Bootstrap Avatar" />
+
+## Icon avatars
+
+Insert icons into avatars for representing roles, objects, or placeholder users. Supports vector icons with Bootstrap-friendly layout.
+
+<ExampleSnippet className="theme-bootstrap" component="AvatarIcon" componentName="React Bootstrap Avatar" />
+
+## Rounded avatars
+
+Use the `shape="rounded"` prop to apply Bootstrap’s rounded corners to the avatar, giving it a subtle square-rounded appearance.
+
+<ExampleSnippet className="theme-bootstrap" component="AvatarRounded" componentName="React Bootstrap Avatar" />
+
+## Square avatars
+
+To make avatars fully square with no border radius, apply `shape="rounded-0"`, matching Bootstrap’s `rounded-0` utility style.
+
+<ExampleSnippet className="theme-bootstrap" component="AvatarSquare" componentName="React Bootstrap Avatar" />
+
+## Sizes
+
+Customize avatar size using the `size` prop. Available options include `xl`, `lg`, `md`, and `sm`, aligning with Bootstrap’s scalable design system.
+
+<ExampleSnippet className="theme-bootstrap" component="AvatarSizes" componentName="React Bootstrap Avatar" />
+
+## Avatars with status
+
+Add a small status indicator (e.g. online, offline) to avatars using the `status` prop — useful for chat interfaces or user dashboards.
+
+<ExampleSnippet className="theme-bootstrap" component="AvatarWithStatus" componentName="React Bootstrap Avatar" />
+
+## API reference
+
+Refer to the API below for all configurable props used with the Bootstrap-styled React Avatar component.
+
+- [&lt;CAvatar /&gt;](./api/#cavatar)

packages/docs/content/components/avatar/examples/AvatarImage.tsx

@@ -4,9 +4,9 @@ import { CAvatar } from '@coreui/react'
 export const AvatarImage = () => {
   return (
     <>
-      <CAvatar src="../../images/avatars/1.jpg" />
-      <CAvatar src="../../images/avatars/2.jpg" />
-      <CAvatar src="../../images/avatars/3.jpg" />
+      <CAvatar src={'/images/avatars/1.jpg'} />
+      <CAvatar src={'/images/avatars/2.jpg'} />
+      <CAvatar src={'/images/avatars/3.jpg'} />
     </>
   )
 }

packages/docs/content/components/avatar/examples/AvatarWithStatus.tsx

@@ -4,7 +4,7 @@ import { CAvatar } from '@coreui/react'
 export const AvatarWithStatus = () => {
   return (
     <>
-      <CAvatar src="../../images/avatars/1.jpg" status="success" />
+      <CAvatar src={'/images/avatars/1.jpg'} status="success" />
       <CAvatar color="secondary" status="danger">
         CUI
       </CAvatar>

packages/docs/content/components/badge/bootstrap.mdx

@@ -0,0 +1,53 @@
+---
+title: React Bootstrap Badge Component
+name: Badge with Bootstrap Styling
+description: Learn how to use CoreUI’s React Badge component with Bootstrap styles to display counters, labels, and indicators within buttons, links, and UI elements.
+route: /components/badge/
+bootstrap_component: true
+---
+
+## How to use React Bootstrap Badge component
+
+React Bootstrap Badges scale based on their parent using `em` units, making them easy to embed inside headings, buttons, or navigation items.
+
+<ExampleSnippet className="theme-bootstrap" component="BadgeExample" componentName="React Bootstrap Badge" />
+
+You can also use badges inside buttons and links to display counters or notifications.
+
+<ExampleSnippet className="theme-bootstrap" component="Badge2Example" componentName="React Bootstrap Badge" />
+
+Keep in mind that depending on usage, badges might be challenging for screen reader users. Add visually hidden helper text when needed to improve accessibility.
+
+<ExampleSnippet className="theme-bootstrap" component="Badge3Example" componentName="React Bootstrap Badge" />
+
+### Positioned badges
+
+Use the `position` prop to place the badge in the corner of a button or link, mimicking the Bootstrap positioning helpers.
+
+<ExampleSnippet className="theme-bootstrap" component="BadgePositionedExample" componentName="React Bootstrap Badge" />
+
+You can also create generic status indicators without a number by combining badges with utility classes.
+
+<ExampleSnippet className="theme-bootstrap" component="BadgePositioned2Example" componentName="React Bootstrap Badge" />
+
+## Contextual variations
+
+Apply `color` props like `primary`, `danger`, or `success` to control the background color of the badge in a Bootstrap-consistent way.
+
+<ExampleSnippet className="theme-bootstrap" component="BadgeContextualVariations" componentName="React Bootstrap Badge" />
+
+Use `textBgColor` to automatically set contrasting text and background colors according to WCAG accessibility standards.
+
+<ExampleSnippet className="theme-bootstrap" component="BadgeContextual2Variations" componentName="React Bootstrap Badge" />
+
+## Pill badges
+
+To make badges more rounded, use the `shape="rounded-pill"` prop. This mirrors Bootstrap’s pill-style badge appearance.
+
+<ExampleSnippet className="theme-bootstrap" component="BadgePillExample" componentName="React Bootstrap Badge" />
+
+## API reference
+
+See below for the full API reference for all available props for the Bootstrap-styled React Badge component.
+
+- [&lt;CBadge /&gt;](./api/#cbadge)

packages/docs/content/components/breadcrumb/bootstrap.mdx

@@ -0,0 +1,57 @@
+---
+title: React Bootstrap Breadcrumb Component
+name: Breadcrumb with Bootstrap Styling
+description: Learn how to use CoreUI’s React Breadcrumb component styled with Bootstrap to indicate navigation hierarchy and enhance user orientation within your app or website.
+route: /components/breadcrumb/
+bootstrap_component: true
+---
+
+## How to use React Bootstrap Breadcrumb component
+
+The React Bootstrap Breadcrumb navigation component shows users where they are in the application hierarchy. It automatically inserts visual separators via CSS, so you don’t have to manually include them.
+
+<ExampleSnippet className="theme-bootstrap" component="BreadcrumbExample" componentName="React Bootstrap Breadcrumb" />
+
+## Custom dividers
+
+Separators between breadcrumb items are automatically inserted using CSS via [`::before`](https://developer.mozilla.org/en-US/docs/Web/CSS/::before) and the [`content`](https://developer.mozilla.org/en-US/docs/Web/CSS/content) property.
+
+You can customize the divider using the CSS variable `--cui-breadcrumb-divider` or the Sass variable `$breadcrumb-divider`. For RTL support, there’s also `$breadcrumb-divider-flipped`.
+
+<ExampleSnippet className="theme-bootstrap" component="BreadcrumbDividersExample" componentName="React Bootstrap Breadcrumb" />
+
+To change the divider in Sass, use the `quote` function. For example, to use a `>` character:
+
+```scss
+$breadcrumb-divider: quote('>');
+```
+
+It’s also possible to use an **embedded SVG icon** as a divider by assigning it to the custom property or Sass variable:
+
+<ExampleSnippet className="theme-bootstrap" component="BreadcrumbDividers2Example" componentName="React Bootstrap Breadcrumb" />
+
+```scss
+$breadcrumb-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' 
+width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='currentColor'/%3E%3C/svg%3E");
+```
+
+To remove dividers entirely, set the CSS custom property to an empty string or the Sass variable to `none`.
+
+<ExampleSnippet className="theme-bootstrap" component="BreadcrumbDividers3Example" componentName="React Bootstrap Breadcrumb" />
+
+```scss
+$breadcrumb-divider: none;
+```
+
+## Accessibility
+
+React Bootstrap Breadcrumbs are accessible by default. CoreUI adds `aria-label="breadcrumb"` to the navigation container and `aria-current="page"` to the active item to ensure proper screen reader behavior.
+
+For best practices, refer to the [WAI-ARIA Authoring Practices: Breadcrumb Pattern](https://www.w3.org/TR/wai-aria-practices/#breadcrumb).
+
+## API reference
+
+Check the API reference below for full details on all available props for the Bootstrap-styled React Breadcrumb component.
+
+- [&lt;CBreadcrumb /&gt;](./api/#cbreadcrumb)
+- [&lt;CBreadcrumbItem /&gt;](./api/#cbreadcrumbitem)

packages/docs/content/components/button-group/bootstrap.mdx

@@ -0,0 +1,78 @@
+---
+title: React Bootstrap Button Group Component
+name: Button Group with Bootstrap Styling
+description: Learn how to group buttons using the React Bootstrap Button Group component from CoreUI. Create accessible, styled toolbars and button sets with ease.
+route: /components/button-group/
+bootstrap_component: true
+---
+
+## How to use React Bootstrap Button Group component
+
+The React Bootstrap Button Group component allows you to group multiple buttons together into a single toolbar-like unit. Wrap a series of `<CButton>` components in a `<CButtonGroup>` to get started.
+
+<ExampleSnippet className="theme-bootstrap" component="ButtonGroupExample" componentName="React Bootstrap Button Group" />
+
+<Callout color="info" title={<>Ensure the correct <code>role</code> and provide a label</>}>
+  For assistive technologies (e.g. screen readers) to identify a set of buttons as grouped, use `role="group"` for button groups and `role="toolbar"` for toolbars.
+
+  Always include an accessible label using `aria-label` or `aria-labelledby` to clarify the purpose of the group.
+</Callout>
+
+React Bootstrap Button Groups can also be applied to a group of links instead of using the [`CNav`](./../navs-tabs/#base-nav) component.
+
+<ExampleSnippet className="theme-bootstrap" component="ButtonGroup2Example" componentName="React Bootstrap Button Group" />
+
+## Mixed styles in React Bootstrap Button Groups
+
+Combine buttons with different styles within a single group for more flexible UI designs.
+
+<ExampleSnippet className="theme-bootstrap" component="ButtonGroupMixedStylesExample" componentName="React Bootstrap Button Group" />
+
+## Outlined button styles
+
+Use `variant="outline"` on grouped buttons to apply Bootstrap's outline button style across the group.
+
+<ExampleSnippet className="theme-bootstrap" component="ButtonGroupOutlinedStylesExample" componentName="React Bootstrap Button Group" />
+
+## Checkbox and radio button groups
+
+Create interactive grouped controls by combining button-style checkboxes and radio buttons inside a React Bootstrap Button Group.
+
+<ExampleSnippet className="theme-bootstrap" component="ButtonGroupCheckboxAndRadioExample" componentName="React Bootstrap Button Group" />
+
+<ExampleSnippet className="theme-bootstrap" component="ButtonGroupCheckboxAndRadio2Example" componentName="React Bootstrap Button Group" />
+
+## React Bootstrap Button Toolbar
+
+Group multiple button groups together into a toolbar using `<CButtonToolbar>`. Combine with layout utilities to control spacing and alignment.
+
+<ExampleSnippet className="theme-bootstrap" component="ButtonToolbarExample" componentName="React Bootstrap Button Group" />
+
+You can also combine input groups with button groups to create interactive toolbars.
+
+<ExampleSnippet className="theme-bootstrap" component="ButtonToolbar2Example" componentName="React Bootstrap Button Group" />
+
+## Sizing React Bootstrap Button Groups
+
+Instead of setting size on individual buttons, apply the `size` prop to the `<CButtonGroup>` to make all buttons within it uniformly sized.
+
+<ExampleSnippet className="theme-bootstrap" component="ButtonGroupSizingExample" componentName="React Bootstrap Button Group" />
+
+## Nesting button groups
+
+Nest a `<CButtonGroup>` inside another to combine dropdowns with standard buttons, as supported in React Bootstrap Button Group usage.
+
+<ExampleSnippet className="theme-bootstrap" component="ButtonGroupNestingExample" componentName="React Bootstrap Button Group" />
+
+## Vertical React Bootstrap Button Groups
+
+Stack buttons vertically using the vertical variation of React Bootstrap Button Group. Note: split dropdowns are not supported in vertical mode.
+
+<ExampleSnippet className="theme-bootstrap" component="ButtonGroupVerticalExample" componentName="React Bootstrap Button Group" />
+
+## API reference
+
+Explore the API documentation for available props and configuration for the React Bootstrap Button Group component and toolbars.
+
+- [&lt;CButtonGroup /&gt;](./api/#cbuttongroup)
+- [&lt;CButtonToolbar /&gt;]()