📦 React + Bootstrap Box

A versatile React component designed to apply Bootstrap 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:

npm install bootstrap react-bootstrap-box

Or with Yarn:

yarn add bootstrap react-bootstrap-box

🚀 Getting Started

1. Including Bootstrap CSS

First, ensure Bootstrap CSS is included in your project:

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:

import React from 'react';

import { Box } from 'react-bootstrap-box';

const App = () => {
    return (
        <Box background="primary" color="white" margin="2" padding="5">
            Hello, world!
        </Box>
    );
};

export default App;

📚 Learn More

Discover the full potential of the React + Bootstrap Box component by exploring its Storybook documentation, where you'll find live examples, interactive demos, and detailed use cases for every prop.