@codux-boards/react-bootstrap

React Bootstrap is the official React implementation of the Bootstrap framework, providing a comprehensive collection of responsive UI components for building modern web applications.

This package provides a collection of pre-built React Bootstrap components designed specifically for use within the Codux visual editor. Once installed, these components will automatically appear in your Codux Add Elements panel, allowing for seamless drag-and-drop integration into your projects.

Features

• Ready-to-use React Bootstrap components optimized for Codux
• Mobile-first responsive design
• Accessible UI elements
• Customizable through Codux's visual interface
• Components include:
  • Buttons
  • Cards
  • Forms and Input controls
  • Navigation components
  • Layout elements (Grid, Container)
  • Modals and Overlays
  • And more...

Installation & Usage

Automatic

1. When creating a new project using Codux, select React Bootstrap to add it as a library.
2. Open the Add Elements panel when viewing your app or boards, to find React Bootstrap under the "External Libraries" category.
3. Drag on stage, or click to select any React Bootstrap component to add it to your current selection on the Stage.

Manual

1. Install React Bootstrap in your Codux project:

npm i -S react-bootstrap bootstrap

or

yarn add react-bootstrap bootstrap

2. Install the Codux React Bootstrap integration as a devDependency:

npm i -D @codux-boards/react-bootstrap

or

yarn add -D @codux-boards/react-bootstrap

3. Open your project in Codux.
4. Open your Codux configuration, and add the following:

"addPanel": {
    "assets": [
      "@codux-boards/react-bootstrap"
    ]
  }

5. Import the styles for Bootstrap in your "Board Global Setup" / application top level component (root.tsx):

import 'bootstrap/dist/css/bootstrap.min.css';

6. Open an App or Board in the project.
7. Open to the Add Elements panel.
8. Find React Bootstrap under the "External Libraries" category.
9. Drag and drop components onto the Stage.
10. Customize data and styling using Codux's visual interface.

Requirements

• Codux editor installed
• React 18+
• Node.js 20+

License

MIT

Author

Codux Team