We just released React Bootstrap 5 on Product Hunt.
Only a few days after the stable release of Bootstrap 5 - we can integrate it with React 17.
Features:
- RTL support
- Material Design 2.0 guidelines
- extensive docs & API
- 700+ UI components & templates
- MIT license - free for personal & commercial use
I hope you will enjoy it :)
NPM Installation
Prerequisites
Before starting the project make sure to install Node LTS (12.x.x or higher). We are using yarn to start a project.
If you want to use package from npm you have to have a project with React. We recommend creating an app with create-react-app from react for beginners.
Step 1: Create React App.
We are using React 17+ version.
yarn create-react-app my-app or npx create-react-app my-app
Step 2: Navigate to App's directory
cd my-app
React Bootstrap 5 installlation
Step 1: Setup MDB
yarn add mdb-react-ui-kit or npm i mdb-react-ui-kit
CSS import
Add the following line in your index.js file before the App.js file import:
import 'mdb-react-ui-kit/dist/css/mdb.min.css'
Font Awesome
Add the following line in public/index.html file inside head section:
<link href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" rel="stylesheet" />
Roboto font
Add the following line in public/index.html file inside head section:
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
Set font family in globally css file for example src/index.css inside src folder as in the example:
body { font-family: Roboto, Helvetica, Arial, sans-serif; }
Step 2: Launch Your App
yarn start or npm run start