0
# React Bootstrap
1

2
React Bootstrap is a comprehensive component library that provides Bootstrap 5 components built specifically for React applications. It offers a complete set of responsive UI components including layout, navigation, forms, buttons, overlays, and interactive elements, all implemented with modern React patterns and TypeScript support.
3

4
## Package Information
5

6
- **Package Name**: react-bootstrap
7
- **Package Type**: npm
8
- **Language**: TypeScript
9
- **Installation**: `npm install react-bootstrap bootstrap`
10

11
## Core Imports
12

13
```typescript
14
import { Button, Container, Row, Col, Nav, Navbar } from "react-bootstrap";
15
```
16

17
For CommonJS:
18

19
```javascript
20
const { Button, Container, Row, Col, Nav, Navbar } = require("react-bootstrap");
21
```
22

23
## Basic Usage
24

25
```typescript
26
import React from 'react';
27
import { Container, Row, Col, Button, Alert } from "react-bootstrap";
28

29
function App() {
30
  return (
31
    <Container>
32
      <Row>
33
        <Col>
34
          <Alert variant="success">
35
            Welcome to React Bootstrap!
36
          </Alert>
37
          <Button variant="primary" size="lg">
38
            Get Started
39
          </Button>
40
        </Col>
41
      </Row>
42
    </Container>
43
  );
44
}
45
```
46

47
## Architecture
48

49
React Bootstrap is built around several key architectural patterns:
50

51
- **Component-Based**: Each Bootstrap component is implemented as a React component with appropriate props
52
- **Responsive Design**: Components support Bootstrap's responsive grid system and breakpoint-based props
53
- **Variant System**: Most components use a `variant` prop system for styling (primary, secondary, success, etc.)
54
- **Compound Components**: Complex components like Dropdown, Modal, and Accordion use compound component patterns
55
- **Context Integration**: Many components use React Context for sharing state between parent and child components
56
- **Bootstrap Prefix**: Components support custom CSS class prefixes via ThemeProvider for custom styling
57

58
## Capabilities
59

60
### Layout System
61

62
Foundation layout components for responsive grid systems and content organization.
63

64
```typescript { .api }
65
interface ContainerProps {
66
  fluid?: boolean | string;
67
  as?: React.ElementType;
68
}
69

70
interface RowProps {
71
  xs?: number | "auto";
72
  sm?: number | "auto"; 
73
  md?: number | "auto";
74
  lg?: number | "auto";
75
  xl?: number | "auto";
76
  xxl?: number | "auto";
77
}
78

79
interface ColProps {
80
  xs?: number | "auto";
81
  sm?: number | "auto";
82
  md?: number | "auto"; 
83
  lg?: number | "auto";
84
  xl?: number | "auto";
85
  xxl?: number | "auto";
86
}
87
```
88

89
[Layout Components](./layout.md)
90

91
### Navigation Components
92

93
Navigation components for menus, breadcrumbs, tabs and navigation bars.
94

95
```typescript { .api }
96
interface NavbarProps {
97
  variant?: "light" | "dark";
98
  expand?: boolean | "sm" | "md" | "lg" | "xl" | "xxl";
99
  fixed?: "top" | "bottom";
100
  sticky?: "top" | "bottom";
101
}
102

103
interface NavProps {
104
  variant?: "tabs" | "pills" | "underline";
105
  fill?: boolean;
106
  justify?: boolean;
107
}
108
```
109

110
[Navigation Components](./navigation.md)
111

112
### Form Components
113

114
Comprehensive form controls with validation support and accessibility features.
115

116
```typescript { .api }
117
interface FormControlProps {
118
  type?: string;
119
  size?: "sm" | "lg";
120
  isValid?: boolean;
121
  isInvalid?: boolean;
122
  placeholder?: string;
123
  value?: string;
124
  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
125
}
126

127
interface FormCheckProps {
128
  type?: "checkbox" | "radio" | "switch";
129
  id?: string;
130
  label?: React.ReactNode;
131
  checked?: boolean;
132
  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
133
}
134
```
135

136
[Form Components](./forms.md)
137

138
### Button Components
139

140
Button components and button groups with multiple variants and states.
141

142
```typescript { .api }
143
interface ButtonProps {
144
  variant?: "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "light" | "dark" | "link" | "outline-primary" | "outline-secondary" | "outline-success" | "outline-danger" | "outline-warning" | "outline-info" | "outline-light" | "outline-dark";
145
  size?: "sm" | "lg";
146
  disabled?: boolean;
147
  active?: boolean;
148
  type?: "button" | "submit" | "reset";
149
  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
150
}
151
```
152

153
[Button Components](./buttons.md)
154

155
### Overlay Components
156

157
Modal dialogs, tooltips, popovers and off-canvas components for layered interfaces.
158

159
```typescript { .api }
160
interface ModalProps {
161
  show?: boolean;
162
  onHide?: () => void;
163
  size?: "sm" | "lg" | "xl";
164
  fullscreen?: boolean | "sm-down" | "md-down" | "lg-down" | "xl-down" | "xxl-down";
165
  centered?: boolean;
166
  backdrop?: boolean | "static";
167
  keyboard?: boolean;
168
}
169

170
interface TooltipProps {
171
  id: string;
172
  children: React.ReactNode;
173
  placement?: "auto" | "top" | "bottom" | "left" | "right";
174
}
175
```
176

177
[Overlay Components](./overlays.md)
178

179
### Interactive Components
180

181
Dynamic components like carousels, accordions, dropdowns and collapsible content.
182

183
```typescript { .api }
184
interface AccordionProps {
185
  defaultActiveKey?: string | string[];
186
  activeKey?: string | string[];
187
  onSelect?: (eventKey: string | null) => void;
188
  flush?: boolean;
189
}
190

191
interface CarouselProps {
192
  activeIndex?: number;
193
  onSelect?: (selectedIndex: number, e?: any) => void;
194
  controls?: boolean;
195
  indicators?: boolean;
196
  interval?: number | null;
197
  pause?: "hover" | false;
198
}
199
```
200

201
[Interactive Components](./interactive.md)
202

203
### Content Components
204

205
Content display components for cards, tables, alerts, badges and media content.
206

207
```typescript { .api }
208
interface AlertProps {
209
  variant?: "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "light" | "dark";
210
  dismissible?: boolean;
211
  onClose?: () => void;
212
}
213

214
interface CardProps {
215
  border?: "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "light" | "dark";
216
  text?: "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "light" | "dark" | "white" | "muted";
217
  bg?: "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "light" | "dark";
218
}
219
```
220

221
[Content Components](./content.md)
222

223
### Utility Components
224

225
Provider components and utility elements for theming, SSR support, loading states, and layout utilities.
226

227
```typescript { .api }
228
interface ThemeProviderProps {
229
  prefixes?: Record<string, string>;
230
  dir?: "ltr" | "rtl";
231
}
232

233
interface SSRProviderProps {
234
  children?: React.ReactNode;
235
}
236

237
interface SpinnerProps {
238
  animation?: "border" | "grow";
239
  size?: "sm";
240
  variant?: "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "light" | "dark";
241
  role?: string;
242
  children?: React.ReactNode;
243
}
244

245
interface PlaceholderProps {
246
  animation?: "glow" | "wave";
247
  bg?: "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "light" | "dark";
248
  size?: "xs" | "sm" | "lg";
249
  xs?: number;
250
  sm?: number;
251
  md?: number;
252
  lg?: number;
253
  xl?: number;
254
  xxl?: number;
255
}
256

257
interface RatioProps {
258
  aspectRatio?: "1x1" | "4x3" | "16x9" | "21x9" | string;
259
}
260
```
261

262
**Usage Examples:**
263

264
```typescript
265
import { ThemeProvider, SSRProvider, Spinner, Placeholder, Ratio } from "react-bootstrap";
266

267
// Theme provider for custom prefixes
268
<ThemeProvider prefixes={{ btn: 'my-btn' }}>
269
  <App />
270
</ThemeProvider>
271

272
// SSR provider for server-side rendering
273
<SSRProvider>
274
  <App />
275
</SSRProvider>
276

277
// Loading spinners
278
<Spinner animation="border" role="status">
279
  <span className="visually-hidden">Loading...</span>
280
</Spinner>
281
<Spinner animation="grow" variant="primary" />
282

283
// Placeholder content
284
<Placeholder xs={6} />
285
<Placeholder className="w-75" />
286
<Placeholder animation="glow">
287
  <Placeholder xs={12} />
288
</Placeholder>
289

290
// Aspect ratio container
291
<Ratio aspectRatio="16x9">
292
  <iframe src="https://www.youtube.com/embed/..." title="YouTube video"></iframe>
293
</Ratio>
294
```
295

296
[Utility Components](./utilities.md)
297

298
## Hooks
299

300
### useAccordionButton
301

302
Custom hook for creating accordion toggle functionality.
303

304
```typescript { .api }
305
/**
306
 * Hook for creating accordion toggle functionality
307
 * @param eventKey - Key to identify accordion item
308
 * @param onClick - Optional click handler
309
 * @returns Click handler and aria props for accordion button
310
 */
311
function useAccordionButton(
312
  eventKey: string,
313
  onClick?: (event: React.MouseEvent) => void
314
): (event: React.MouseEvent) => void;
315
```
316

317
### Theme Hooks
318

319
Bootstrap theme integration hooks from ThemeProvider.
320

321
```typescript { .api }
322
/**
323
 * Gets component CSS class prefix from theme
324
 * @param prefix - Component prefix override
325
 * @param defaultPrefix - Default prefix if none set
326
 * @returns Resolved CSS class prefix
327
 */
328
function useBootstrapPrefix(prefix?: string, defaultPrefix?: string): string;
329

330
/**
331
 * Gets responsive breakpoints array from theme
332
 * @returns Array of breakpoint names
333
 */
334
function useBootstrapBreakpoints(): string[];
335

336
/**
337
 * Gets minimum breakpoint name from theme  
338
 * @returns Minimum breakpoint name
339
 */
340
function useBootstrapMinBreakpoint(): string;
341

342
/**
343
 * Checks if text direction is right-to-left
344
 * @returns True if RTL direction
345
 */
346
function useIsRTL(): boolean;
347
```
348

349
## Common Types
350

351
```typescript { .api }
352
type Variant = "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "light" | "dark";
353

354
type Size = "sm" | "lg";
355

356
type Placement = "auto" | "top" | "bottom" | "left" | "right";
357

358
interface BsPrefixProps {
359
  bsPrefix?: string;
360
}
361

362
interface AsProps {
363
  as?: React.ElementType;
364
}
365

366
interface ResponsiveUtilityValue<T> {
367
  xs?: T;
368
  sm?: T;
369
  md?: T;
370
  lg?: T;
371
  xl?: T;
372
  xxl?: T;
373
}
374

375
interface BootstrapBreakpoint {
376
  span?: number | "auto";
377
  offset?: number;
378
  order?: number;
379
}
380
```