Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Commit e1ab484

Browse filesBrowse files
mrholekmrholek
committed
docs: add "use with Bootstrap"
1 parent cb15c39 commit e1ab484
Copy full SHA for e1ab484

File tree

77 files changed

+5042
-99
lines changed
Filter options

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.
Dismiss banner

77 files changed

+5042
-99
lines changed

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

Copy file name to clipboard
+34Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
---
2+
title: React Bootstrap Accordion Component
3+
name: Accordion with Bootstrap Styling
4+
description: Learn how to create vertically collapsing Bootstrap-style accordions using CoreUI’s React components.
5+
route: /components/accordion/
6+
bootstrap_component: true
7+
---
8+
9+
## How to use React Bootstrap Accordion component
10+
11+
Use CoreUI's React components styled with Bootstrap to build interactive and collapsible accordion sections.
12+
13+
<ExampleSnippet className="theme-bootstrap" component="AccordionExample" componentName="React Bootstrap Accordion" />
14+
15+
### Flush style
16+
17+
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.
18+
19+
<ExampleSnippet className="theme-bootstrap" component="AccordionFlushExample" componentName="React Bootstrap Accordion" />
20+
21+
### Always open behavior
22+
23+
Use the `alwaysOpen` property to keep multiple accordion items expanded at the same time, mimicking Bootstrap’s multiple-item open functionality.
24+
25+
<ExampleSnippet className="theme-bootstrap" component="AccordionAlwaysOpenExample" componentName="React Bootstrap Accordion" />
26+
27+
## API reference
28+
29+
Refer to the API documentation for detailed descriptions of all the available props and components used to create Bootstrap-styled accordions in React.
30+
31+
- [&lt;CAccordion /&gt;](./api/#caccordion)
32+
- [&lt;CAccordionBody /&gt;](./api/#caccordionbody)
33+
- [&lt;CAccordionHeader /&gt;](./api/#caccordionheader)
34+
- [&lt;CAccordionItem /&gt;](./api/#caccordionitem)

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

Copy file name to clipboard
+70Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
---
2+
title: React Bootstrap Alert Component
3+
name: Alert with Bootstrap Styling
4+
description: Learn how to use CoreUI’s React Alert component styled with Bootstrap for contextual feedback messages and dismissible UI alerts.
5+
menu: Components
6+
route: /components/alert/
7+
bootstrap_component: true
8+
---
9+
10+
## How to use React Bootstrap Alert component
11+
12+
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.
13+
14+
<ExampleSnippet className="theme-bootstrap" component="AlertExample" componentName="React Bootstrap Alert" />
15+
16+
<Callout color="warning" type="colorAssistiveTechnologies" />
17+
18+
### Live example
19+
20+
Click the button below to display an alert (initially hidden), then dismiss it using the built-in close button — styled the Bootstrap way.
21+
22+
<ExampleSnippet className="theme-bootstrap" component="AlertLiveExample" componentName="React Bootstrap Alert" />
23+
24+
### Link color
25+
26+
To include links inside your alert, use the `<CAlertLink>` component — it automatically adopts the contextual Bootstrap color of the parent alert.
27+
28+
<ExampleSnippet className="theme-bootstrap" component="AlertLinkColorExample" componentName="React Bootstrap Alert" />
29+
30+
### Additional content
31+
32+
React Bootstrap Alerts can include extra structured content such as headings, paragraphs, and horizontal rules for enhanced readability.
33+
34+
<ExampleSnippet className="theme-bootstrap" component="AlertAdditionalContentExample" componentName="React Bootstrap Alert" />
35+
36+
### Icons
37+
38+
Use CoreUI Icons and flexbox utilities to add icons to your alerts. Combine them with spacing utilities for precise layout control.
39+
40+
<ExampleSnippet className="theme-bootstrap" component="AlertIcons1Example" componentName="React Bootstrap Alert" />
41+
42+
Need more than one icon in your alert? CoreUI Icons can be stacked or arranged using flex utilities.
43+
44+
<ExampleSnippet className="theme-bootstrap" component="AlertIcons2Example" componentName="React Bootstrap Alert" />
45+
46+
### Solid style
47+
48+
Add `variant="solid"` to give the alert a solid background color, in line with Bootstrap’s solid alert variants.
49+
50+
<ExampleSnippet className="theme-bootstrap" component="AlertSolidExample" componentName="React Bootstrap Alert" />
51+
52+
### Dismissing
53+
54+
Use the `dismissible` prop to allow users to close the alert. This will completely remove it from the DOM.
55+
56+
<ExampleSnippet className="theme-bootstrap" component="AlertDismissingExample" componentName="React Bootstrap Alert" />
57+
58+
<Callout color="warning">
59+
When an alert is dismissed, the element is completely removed from the page structure. If a
60+
keyboard user dismisses the alert using the close button, their focus will suddenly be lost and,
61+
depending on the browser, reset to the start of the page/document.
62+
</Callout>
63+
64+
## API reference
65+
66+
Review the API documentation for detailed information about the props available in the Bootstrap-styled React Alert component.
67+
68+
- [&lt;CAlert /&gt;](./api/#calert)
69+
- [&lt;CAlertHeading /&gt;](./api/#calertheading)
70+
- [&lt;CAlertLink /&gt;](./api/#calertlink)

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

Copy file name to clipboard
+55Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
---
2+
title: React Bootstrap Avatar Component
3+
name: Avatar with Bootstrap Styling
4+
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.
5+
route: /components/avatar/
6+
bootstrap_component: true
7+
---
8+
9+
## Image avatars
10+
11+
Use Bootstrap-styled React avatars to display user profile images in a circular format — ideal for representing user accounts and contacts.
12+
13+
<ExampleSnippet className="theme-bootstrap" component="AvatarImage" componentName="React Bootstrap Avatar" />
14+
15+
## Letter avatars
16+
17+
Display user initials using letter-based avatars. A perfect fallback when images aren’t available, and still visually consistent with Bootstrap styling.
18+
19+
<ExampleSnippet className="theme-bootstrap" component="AvatarLetter" componentName="React Bootstrap Avatar" />
20+
21+
## Icon avatars
22+
23+
Insert icons into avatars for representing roles, objects, or placeholder users. Supports vector icons with Bootstrap-friendly layout.
24+
25+
<ExampleSnippet className="theme-bootstrap" component="AvatarIcon" componentName="React Bootstrap Avatar" />
26+
27+
## Rounded avatars
28+
29+
Use the `shape="rounded"` prop to apply Bootstrap’s rounded corners to the avatar, giving it a subtle square-rounded appearance.
30+
31+
<ExampleSnippet className="theme-bootstrap" component="AvatarRounded" componentName="React Bootstrap Avatar" />
32+
33+
## Square avatars
34+
35+
To make avatars fully square with no border radius, apply `shape="rounded-0"`, matching Bootstrap’s `rounded-0` utility style.
36+
37+
<ExampleSnippet className="theme-bootstrap" component="AvatarSquare" componentName="React Bootstrap Avatar" />
38+
39+
## Sizes
40+
41+
Customize avatar size using the `size` prop. Available options include `xl`, `lg`, `md`, and `sm`, aligning with Bootstrap’s scalable design system.
42+
43+
<ExampleSnippet className="theme-bootstrap" component="AvatarSizes" componentName="React Bootstrap Avatar" />
44+
45+
## Avatars with status
46+
47+
Add a small status indicator (e.g. online, offline) to avatars using the `status` prop — useful for chat interfaces or user dashboards.
48+
49+
<ExampleSnippet className="theme-bootstrap" component="AvatarWithStatus" componentName="React Bootstrap Avatar" />
50+
51+
## API reference
52+
53+
Refer to the API below for all configurable props used with the Bootstrap-styled React Avatar component.
54+
55+
- [&lt;CAvatar /&gt;](./api/#cavatar)

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

Copy file name to clipboardExpand all lines: packages/docs/content/components/avatar/examples/AvatarImage.tsx
+3-3Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,9 @@ import { CAvatar } from '@coreui/react'
44
export const AvatarImage = () => {
55
return (
66
<>
7-
<CAvatar src="../../images/avatars/1.jpg" />
8-
<CAvatar src="../../images/avatars/2.jpg" />
9-
<CAvatar src="../../images/avatars/3.jpg" />
7+
<CAvatar src={'/images/avatars/1.jpg'} />
8+
<CAvatar src={'/images/avatars/2.jpg'} />
9+
<CAvatar src={'/images/avatars/3.jpg'} />
1010
</>
1111
)
1212
}

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

Copy file name to clipboardExpand all lines: packages/docs/content/components/avatar/examples/AvatarWithStatus.tsx
+1-1Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { CAvatar } from '@coreui/react'
44
export const AvatarWithStatus = () => {
55
return (
66
<>
7-
<CAvatar src="../../images/avatars/1.jpg" status="success" />
7+
<CAvatar src={'/images/avatars/1.jpg'} status="success" />
88
<CAvatar color="secondary" status="danger">
99
CUI
1010
</CAvatar>

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

Copy file name to clipboard
+53Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
---
2+
title: React Bootstrap Badge Component
3+
name: Badge with Bootstrap Styling
4+
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.
5+
route: /components/badge/
6+
bootstrap_component: true
7+
---
8+
9+
## How to use React Bootstrap Badge component
10+
11+
React Bootstrap Badges scale based on their parent using `em` units, making them easy to embed inside headings, buttons, or navigation items.
12+
13+
<ExampleSnippet className="theme-bootstrap" component="BadgeExample" componentName="React Bootstrap Badge" />
14+
15+
You can also use badges inside buttons and links to display counters or notifications.
16+
17+
<ExampleSnippet className="theme-bootstrap" component="Badge2Example" componentName="React Bootstrap Badge" />
18+
19+
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.
20+
21+
<ExampleSnippet className="theme-bootstrap" component="Badge3Example" componentName="React Bootstrap Badge" />
22+
23+
### Positioned badges
24+
25+
Use the `position` prop to place the badge in the corner of a button or link, mimicking the Bootstrap positioning helpers.
26+
27+
<ExampleSnippet className="theme-bootstrap" component="BadgePositionedExample" componentName="React Bootstrap Badge" />
28+
29+
You can also create generic status indicators without a number by combining badges with utility classes.
30+
31+
<ExampleSnippet className="theme-bootstrap" component="BadgePositioned2Example" componentName="React Bootstrap Badge" />
32+
33+
## Contextual variations
34+
35+
Apply `color` props like `primary`, `danger`, or `success` to control the background color of the badge in a Bootstrap-consistent way.
36+
37+
<ExampleSnippet className="theme-bootstrap" component="BadgeContextualVariations" componentName="React Bootstrap Badge" />
38+
39+
Use `textBgColor` to automatically set contrasting text and background colors according to WCAG accessibility standards.
40+
41+
<ExampleSnippet className="theme-bootstrap" component="BadgeContextual2Variations" componentName="React Bootstrap Badge" />
42+
43+
## Pill badges
44+
45+
To make badges more rounded, use the `shape="rounded-pill"` prop. This mirrors Bootstrap’s pill-style badge appearance.
46+
47+
<ExampleSnippet className="theme-bootstrap" component="BadgePillExample" componentName="React Bootstrap Badge" />
48+
49+
## API reference
50+
51+
See below for the full API reference for all available props for the Bootstrap-styled React Badge component.
52+
53+
- [&lt;CBadge /&gt;](./api/#cbadge)

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

Copy file name to clipboard
+57Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
---
2+
title: React Bootstrap Breadcrumb Component
3+
name: Breadcrumb with Bootstrap Styling
4+
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.
5+
route: /components/breadcrumb/
6+
bootstrap_component: true
7+
---
8+
9+
## How to use React Bootstrap Breadcrumb component
10+
11+
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.
12+
13+
<ExampleSnippet className="theme-bootstrap" component="BreadcrumbExample" componentName="React Bootstrap Breadcrumb" />
14+
15+
## Custom dividers
16+
17+
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.
18+
19+
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`.
20+
21+
<ExampleSnippet className="theme-bootstrap" component="BreadcrumbDividersExample" componentName="React Bootstrap Breadcrumb" />
22+
23+
To change the divider in Sass, use the `quote` function. For example, to use a `>` character:
24+
25+
```scss
26+
$breadcrumb-divider: quote('>');
27+
```
28+
29+
It’s also possible to use an **embedded SVG icon** as a divider by assigning it to the custom property or Sass variable:
30+
31+
<ExampleSnippet className="theme-bootstrap" component="BreadcrumbDividers2Example" componentName="React Bootstrap Breadcrumb" />
32+
33+
```scss
34+
$breadcrumb-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'
35+
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");
36+
```
37+
38+
To remove dividers entirely, set the CSS custom property to an empty string or the Sass variable to `none`.
39+
40+
<ExampleSnippet className="theme-bootstrap" component="BreadcrumbDividers3Example" componentName="React Bootstrap Breadcrumb" />
41+
42+
```scss
43+
$breadcrumb-divider: none;
44+
```
45+
46+
## Accessibility
47+
48+
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.
49+
50+
For best practices, refer to the [WAI-ARIA Authoring Practices: Breadcrumb Pattern](https://www.w3.org/TR/wai-aria-practices/#breadcrumb).
51+
52+
## API reference
53+
54+
Check the API reference below for full details on all available props for the Bootstrap-styled React Breadcrumb component.
55+
56+
- [&lt;CBreadcrumb /&gt;](./api/#cbreadcrumb)
57+
- [&lt;CBreadcrumbItem /&gt;](./api/#cbreadcrumbitem)

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

Copy file name to clipboard
+78Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
---
2+
title: React Bootstrap Button Group Component
3+
name: Button Group with Bootstrap Styling
4+
description: Learn how to group buttons using the React Bootstrap Button Group component from CoreUI. Create accessible, styled toolbars and button sets with ease.
5+
route: /components/button-group/
6+
bootstrap_component: true
7+
---
8+
9+
## How to use React Bootstrap Button Group component
10+
11+
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.
12+
13+
<ExampleSnippet className="theme-bootstrap" component="ButtonGroupExample" componentName="React Bootstrap Button Group" />
14+
15+
<Callout color="info" title={<>Ensure the correct <code>role</code> and provide a label</>}>
16+
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.
17+
18+
Always include an accessible label using `aria-label` or `aria-labelledby` to clarify the purpose of the group.
19+
</Callout>
20+
21+
React Bootstrap Button Groups can also be applied to a group of links instead of using the [`CNav`](./../navs-tabs/#base-nav) component.
22+
23+
<ExampleSnippet className="theme-bootstrap" component="ButtonGroup2Example" componentName="React Bootstrap Button Group" />
24+
25+
## Mixed styles in React Bootstrap Button Groups
26+
27+
Combine buttons with different styles within a single group for more flexible UI designs.
28+
29+
<ExampleSnippet className="theme-bootstrap" component="ButtonGroupMixedStylesExample" componentName="React Bootstrap Button Group" />
30+
31+
## Outlined button styles
32+
33+
Use `variant="outline"` on grouped buttons to apply Bootstrap's outline button style across the group.
34+
35+
<ExampleSnippet className="theme-bootstrap" component="ButtonGroupOutlinedStylesExample" componentName="React Bootstrap Button Group" />
36+
37+
## Checkbox and radio button groups
38+
39+
Create interactive grouped controls by combining button-style checkboxes and radio buttons inside a React Bootstrap Button Group.
40+
41+
<ExampleSnippet className="theme-bootstrap" component="ButtonGroupCheckboxAndRadioExample" componentName="React Bootstrap Button Group" />
42+
43+
<ExampleSnippet className="theme-bootstrap" component="ButtonGroupCheckboxAndRadio2Example" componentName="React Bootstrap Button Group" />
44+
45+
## React Bootstrap Button Toolbar
46+
47+
Group multiple button groups together into a toolbar using `<CButtonToolbar>`. Combine with layout utilities to control spacing and alignment.
48+
49+
<ExampleSnippet className="theme-bootstrap" component="ButtonToolbarExample" componentName="React Bootstrap Button Group" />
50+
51+
You can also combine input groups with button groups to create interactive toolbars.
52+
53+
<ExampleSnippet className="theme-bootstrap" component="ButtonToolbar2Example" componentName="React Bootstrap Button Group" />
54+
55+
## Sizing React Bootstrap Button Groups
56+
57+
Instead of setting size on individual buttons, apply the `size` prop to the `<CButtonGroup>` to make all buttons within it uniformly sized.
58+
59+
<ExampleSnippet className="theme-bootstrap" component="ButtonGroupSizingExample" componentName="React Bootstrap Button Group" />
60+
61+
## Nesting button groups
62+
63+
Nest a `<CButtonGroup>` inside another to combine dropdowns with standard buttons, as supported in React Bootstrap Button Group usage.
64+
65+
<ExampleSnippet className="theme-bootstrap" component="ButtonGroupNestingExample" componentName="React Bootstrap Button Group" />
66+
67+
## Vertical React Bootstrap Button Groups
68+
69+
Stack buttons vertically using the vertical variation of React Bootstrap Button Group. Note: split dropdowns are not supported in vertical mode.
70+
71+
<ExampleSnippet className="theme-bootstrap" component="ButtonGroupVerticalExample" componentName="React Bootstrap Button Group" />
72+
73+
## API reference
74+
75+
Explore the API documentation for available props and configuration for the React Bootstrap Button Group component and toolbars.
76+
77+
- [&lt;CButtonGroup /&gt;](./api/#cbuttongroup)
78+
- [&lt;CButtonToolbar /&gt;]()

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.