DEV Community

loading...
Cover image for React Bootstrap 5

React Bootstrap 5

mdbootstrap profile image MD Bootstrap ・2 min read

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 :)

Alt Text

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
Enter fullscreen mode Exit fullscreen mode

Step 2: Navigate to App's directory

cd my-app
Enter fullscreen mode Exit fullscreen mode

React Bootstrap 5 installlation

Step 1: Setup MDB

yarn add mdb-react-ui-kit or npm i mdb-react-ui-kit
Enter fullscreen mode Exit fullscreen mode

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'
Enter fullscreen mode Exit fullscreen mode

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" />
Enter fullscreen mode Exit fullscreen mode

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" />
Enter fullscreen mode Exit fullscreen mode

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; }
Enter fullscreen mode Exit fullscreen mode

Step 2: Launch Your App

yarn start or npm run start
Enter fullscreen mode Exit fullscreen mode

Discussion (1)

Collapse
jagaryousef profile image
Jagar

Yummy, that's great I am an android developer (and also develop my APIs) but I wanted to develop some web-based stuff for my apps, and I think I can start here.

Forem Open with the Forem app