https://github.com/andrewdyer/react-bootstrap-box
A versatile React component designed to apply Bootstrap utility classnames based on provided props.
https://github.com/andrewdyer/react-bootstrap-box
bootstrap react
Last synced: 9 months ago
JSON representation
A versatile React component designed to apply Bootstrap utility classnames based on provided props.
- Host: GitHub
- URL: https://github.com/andrewdyer/react-bootstrap-box
- Owner: andrewdyer
- Created: 2024-08-01T20:17:26.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-11-06T21:41:15.000Z (over 1 year ago)
- Last Synced: 2024-11-06T21:42:17.253Z (over 1 year ago)
- Topics: bootstrap, react
- Language: TypeScript
- Homepage:
- Size: 443 KB
- Stars: 0
- Watchers: 1
- Forks: 1
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 📦 React + Bootstrap Box
A versatile [React](https://react.dev/) component designed to apply [Bootstrap](https://getbootstrap.com/) utility classnames based on provided props.
## 📄 License
Licensed under MIT. Totally free for private or commercial projects.
## ✨ Introduction
The **React + Bootstrap Box** component simplifies applying Bootstrap utility classes in React. With an intuitive prop-driven API, it enables you to quickly and efficiently manage styles like borders, spacing, flexbox, typography, and more - all without manually writing classnames.
## 📥 Installation
To install this package use npm:
```bash
npm install bootstrap react-bootstrap-box
```
Or with Yarn:
```bash
yarn add bootstrap react-bootstrap-box
```
## 🚀 Getting Started
### 1. Including Bootstrap CSS
First, ensure Bootstrap CSS is included in your project:
```tsx
import 'bootstrap/dist/css/bootstrap.min.css';
```
## 📖 Usage
### Using the Box Component
In your `App.tsx`, or any other component, the `Box` component can be used:
```tsx
import React from 'react';
import { Box } from 'react-bootstrap-box';
const App = () => {
return (
Hello, world!
);
};
export default App;
```
## 📚 Learn More
Discover the full potential of the **React + Bootstrap Box** component by exploring its [Storybook documentation](https://box.andrewdyer.rocks/), where you'll find live examples, interactive demos, and detailed use cases for every prop.