Boostrap4 style error

[Dannergal]

Prerequisites

• [X] I have searched the existing issues
• [X] I understand that providing a SSCCE example is tremendously useful to the maintainers.
• [X] I have read the documentation
• [ ] Ideally, I'm providing a sample JSFiddle, Codesandbox.io or preferably a shared playground link demonstrating the issue.

What theme are you using?

bootstrap-4

Version

5.x

Current Behavior

I follow the steps from: https://github.com/rjsf-team/react-jsonschema-form/tree/main/packages/bootstrap-4 and get this:

I call the Form: import Form from '@rjsf/bootstrap-4';

Expected Behavior

I expected to happen the same in Demo: https://rjsf-team.github.io/react-jsonschema-form/

Steps To Reproduce

1. sudo yarn add react-bootstrap @rjsf/core
2. sudo yarn add @rjsf/bootstrap-4
3. import Form from '@rjsf/bootstrap-4';
4. <Form schema={jsonForm.data.rjsfSchema} uiSchema= {uiSchema} //{jsonForm.data.uiSchema} formData={jsonForm.data.formData} validator={validator} />

Environment

- OS: MACos Ventura Version 13.4 (22F66)
- Node: v18.14.1
- NPM: 9.3.1
- yarn: 1.22.19
  "dependencies": {
    "@rjsf/bootstrap-4": "^5.8.1",
    "@rjsf/core": "^5.8.1",
    "@rjsf/utils": "^5.8.1",
    "@rjsf/validator-ajv8": "^5.7.2",
    "axios": "^1.4.0",
    "markdown-to-jsx": "^7.2.0",
    "react": "^18.2.0",
    "react-bootstrap": "^2.7.4",
    "react-dom": "^18.2.0"

Anything else?

I have the same result with: import Form from '@rjsf/bootstrap-4'; import Form from '@rjsf/core';

[Dannergal]

@heath-freenome @epicfaace I saw that you are contributor, Can you help me please?

[heath-freenome]

@Dannergal can you provide a codesandbox.io example? I'm literally walking out the door for a 6 day vacation so I may not be able to look into it for a bit. @nickgros may also be able to help while I'm gone depending on how busy he is.

[Dannergal]

Sure! thanks!, please I have another question about this library #3723

[Dannergal]

@heath-freenome @nickgros I share: https://codesandbox.io/p/sandbox/bug-boostrap4-forked-sz6m69

[nkrietenbrink]

Hey! I had the same issue! On the docs of react-bootstrap, they say you have to install bootstrap as well and import the css in your project. So I installed bootstrap npm install bootstrap and imported the styles like this: @import 'bootstrap/scss/bootstrap';

After that, the style is as expected.

[Dannergal]

Thanks @nickgros , but i cant , i have the error:

[nickgros]

@Dannergal this is an issue with your build configuration, not RJSF, so we can't support you. A simple fix would be to import Bootstrap 4 CSS via CDN instead of NPM. See Bootstrap 4 docs.