@react-querybuilder/bootstrap

@react-querybuilder/bootstrap

Official react-querybuilder compatibility package for Bootstrap.

• Demo
• Full documentation
• CodeSandbox / StackBlitz example projects

Installation

npm i react-querybuilder @react-querybuilder/bootstrap bootstrap bootstrap-icons
# OR yarn add / pnpm add / bun add

Usage

To configure the query builder to use Bootstrap-compatible components, place QueryBuilderBootstrap above QueryBuilder in the component hierarchy.

import { QueryBuilderBootstrap } from '@react-querybuilder/bootstrap';
import 'bootstrap-icons/font/bootstrap-icons.scss';
import 'bootstrap/scss/bootstrap.scss';
import { useState } from 'react';
import { type Field, QueryBuilder, type RuleGroupType } from 'react-querybuilder';

const fields: Field[] = [
  { name: 'firstName', label: 'First Name' },
  { name: 'lastName', label: 'Last Name' },
];

export function App() {
  const [query, setQuery] = useState<RuleGroupType>({ combinator: 'and', rules: [] });

  return (
    <QueryBuilderBootstrap>
      <QueryBuilder fields={fields} defaultQuery={query} onQueryChange={setQuery} />
    </QueryBuilderBootstrap>
  );
}

[!NOTE]

Some additional styling may be necessary. We recommend the following:

.queryBuilder .form-control,
.queryBuilder .form-select {
  display: inline-block;
  width: auto;
}

QueryBuilderBootstrap is a React context provider that assigns the following props to all descendant QueryBuilder elements. The props can be overridden on the QueryBuilder or used directly without the context provider.

Export	QueryBuilder prop
bootstrapControlClassnames	controlClassnames
bootstrapControlElements	controlElements
bootstrapTranslations	translations
BootstrapNotToggle	controlElements.notToggle
BootstrapValueEditor	controlElements.valueEditor

[!TIP]

By default, this package uses icons from bootstrap-icons for button labels. To reset button labels to their default strings, use defaultTranslations from react-querybuilder.

<QueryBuilderBootstrap translations={defaultTranslations}>

Changelog

[v8.4.0] - 2025-03-18

Fixed

• [#860] The idGenerator prop is respected for all operations that create new rules or groups.

Added

• [#860] @react-querybuilder/dnd now supports react-dnd-touch-backend as a drop-in replacement for react-dnd-html5-backend. If both are provided, the touch backend will be preferred when a touch device is detected.
• [#860] "Group" feature of @react-querybuilder/dnd. Pressing the <kbd>Ctrl</kbd> key while dragging a rule/group will form a new group at the target path with the target rule/group and the dragged rule/group in its rules array. Pressing the <kbd>Alt</kbd>/<kbd>⌥ Option</kbd> key at the same time will leave the rule/group in its original location and clone it for the new group.
• [#860] Modifier keys used during drag-and-drop to indicate cloning and grouping (by default <kbd>Alt</kbd>/<kbd>⌥ Option</kbd> and <kbd>Ctrl</kbd>, respectively) are now configurable on the QueryBuilderDnD component with the copyModeModifierKey and groupModeModifierKey props.
• [#860] New group query tool which creates a new group at a target path with its rules array containing the objects from a source path and the target path.