A blog about using the latest Bootstrap 5 with react JS in CSS style. I am not going to use react-bootstrap as it is still in alpha ( on the day of writing this ).

Create a project

npx create-react-app bootstrap5-react

Installing bootstrap

npm i bootstrap

Installing node sass

Since node-sass is now deprecated, I will be using sass. It solves a common error.

npm i sass

Now in our src folder, we will create a main.scss file and add the following overrite to it.

Now, import this scss on top in your index.js file.

import './main.scss';

I will simply add the following code to show that our bootstrap setup along with variable overite is working correctly.

Run this using npm start and you will see the output.

Visit For More.

Desi Programmer - Coding Tutorials And Blogs For The Community

Setting Up Our Basic project

We will first setup a basic express app that sends a Html file on request. if you don’t know that, you can simply code the code below.

mkdir node-sass-bootstrap 
cd node-sass-bootstrap 
npm init --yes 
npm i express bootstrap

Create an index.js file and add the following content there.

const express = require('express'); 
const path = require('path'); 

const app = express(); 

app.get('/', (req, res) => {
     res.sendFile(path.resolve('./views/index.html'));
 }); 

const PORT = 3001; 

app.listen(PORT, () => console.log(`Started at PORT ${PORT}`));

Also create a directory named views and add an index.html file there, with whatever content you want.

Setting Up Sass

Next we need to install node-sass that will compile our scss files.

For Windows

npm i -g node-sass
# use this if there shows an error saying script cannot be loaded 

Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy Unrestricted

For Linux

sudo npm install --unsafe-perm node-sass

Using Sass

Then we will create a directory named sass and a file in it named main.sass. If you use any other name, remember to change in the commands.

Add the following content in the sass file to customize primary color and font. For more customization visit Bootstrap

$primary : #eb4d4b; 
$danger : #535c68; 

@import url('https://fonts.googleapis.com/css2?family=Do+Hyeon&display=swap'); 

$font-family-base : 'Do Hyeon', sans-serif; 

@import '../node_modules/bootstrap/scss/bootstrap.scss';

Now whenever you want to compile you can use node-sass, I am adding that as a command for simpilicity.

# to compile 
node-sass ./sass/main.scss -o ./static/css/ 

# to watch 

node-sass ./sass/main.scss -wo ./static/css/

NOTE : The -wo won’t compile it on the first run, only after the changes.

Originally published at https://desiprogrammer.com.