Customization

Bootstrap

Bootstrap v5 adapter usage

import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap-icons/font/bootstrap-icons.css';
import '@vojtechportes/react-query-builder/styles.css';
import { components } from '@vojtechportes/react-query-builder/bootstrap/v5';

<Builder
  fields={fields}
  data={data}
  components={components}
  onChange={setData}
/>;

Bootstrap v5 import

import { components } from '@vojtechportes/react-query-builder/bootstrap/v5';

createBootstrapComponents

import {
  Builder,
  type DenormalizedQuery,
} from '@vojtechportes/react-query-builder';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap-icons/font/bootstrap-icons.css';
import '@vojtechportes/react-query-builder/styles.css';
import {
  createBootstrapComponents,
  components as bootstrapComponents,
} from '@vojtechportes/react-query-builder/bootstrap/v5';

const components = createBootstrapComponents(bootstrapComponents, {
  form: {
    Input: MyInput,
  },
  Add: MyAddButton,
});

export const MyBootstrapBuilder = () => {
  const [data, setData] = useState<DenormalizedQuery>(initialData);

  return (
    <Builder
      fields={fields}
      data={data}
      components={components}
      onChange={setData}
    />
  );
};

Available entrypoint

@vojtechportes/react-query-builder/bootstrap/v5 Bootstrap 5 adapter.

Exports

components Ready-made Bootstrap component mapping for Builder.
Individual mapped components Named exports such as BootstrapSelect, BootstrapInput, and related Bootstrap-backed controls for partial overrides.
createBootstrapComponents Merges Bootstrap defaults with local overrides while preserving nested form keys.
Stylesheet requirement Import bootstrap/dist/css/bootstrap.min.css and bootstrap-icons/font/bootstrap-icons.css before rendering the adapter so the Bootstrap classes and official icon set resolve to actual styles.

Documentation

Bootstrap adapter guide.