Customization

Bootstrap

Use the Bootstrap adapter when your application already ships Bootstrap 5 styles and you want the builder controls mapped to Bootstrap-flavored UI.

Available entrypoint

@vojtechportes/react-query-builder/bootstrap/v5 is the Bootstrap 5 adapter and is available in the demo.

Installing Bootstrap

Install Bootstrap and import its stylesheet before rendering the adapter.

Bootstrap 5 peer

npm install bootstrap@^5.0.0 bootstrap-icons@^1.13.1

Stylesheet required

Import bootstrap/dist/css/bootstrap.min.css in your application entrypoint or the specific subtree where the adapter is rendered. Also import bootstrap-icons/font/bootstrap-icons.css so the adapter icon buttons render with the official Bootstrap Icons package. Without these stylesheets, the adapter falls back to unstyled HTML.

Using Bootstrap v5

Bootstrap v5 adapter

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 { components } from '@vojtechportes/react-query-builder/bootstrap/v5';

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

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

Extending the Bootstrap adapter

Merging Bootstrap defaults

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
      data={data}
      fields={fields}
      components={components}
      onChange={setData}
    />
  );
};