How to Use Bootstrap 4 in React JS: Installation, Example

Today I am going to explain How to Use Bootstrap 4 in React JS, with its Installation. A new topic with new fun learning techniques. First will see the Installation of BootStrap with an easy understanding. After this, you will see the React Bootstrap Autocomplete Extensions and, at last, how to Create a Mini React JS Project Using Bootstrap.

Steps to Install Bootstrap

Step 1: Go to google.com and type npm and visit this website (click here for the link)

Step 2: Now go to the search and type Bootstrap; you will get many options but select the bootstrap 4.5.0 (click here for the link)

Step 3: Scroll down and see the Quick Start; over there, you can see Install with npmnpm install bootstrap.

Now you have to copy or type on the CMD (npm install bootstrap); you have to make sure that the project is not started and install it first, then start the program.

Step 4: Check that the file of bootstrap 4 is installed or not. For this, you have to go to your Visual Studio Code a check for the Package.json file in that you can see the dependencies below that you can see bootstrap: “4.5.0,” which you have installed in the project.

Step 5: After installation, you have to import the bootstrap into your project. For that, you have to go to Visual Studio Code a follow these steps:

Step 1: node_modules

Step 2: Select bootstrap

Step 3: Select Dist

Step 4: Select CSS

Step 5: Select bootstrap.min.css

Step 6: Come to the App.js file and import the bootstrap file into it; for that, you have to write (import “../node_modules/bootstrap/dist/css/bootstrap.min.css”;)

Also, Learn: How to Make a Login form in React JS?

React Bootstrap Autocomplete Extension

How to tell our VS Code to auto-complete the bootstrap code for that, you have to follow the steps.

Step 1: At the left side of VS Code, you can see the 4 options of Extensions; click on that.

Step 2: Now go to the search and type (IntelliSense for CSS class names in HTML)

Step 3: Install the Extension

Create a Mini React WebPage using React Bootstrap 4

React Mini Project in BootStrap
Today I am going to explain How to Use Bootstrap 4 in React JS, with its Installation.

Index.js

import React from ‘react’;

import ReactDOM from ‘react-dom’;

import ‘./index.css’;

import App from ‘./App’;

ReactDOM.render(

  <React.StrictMode>

    <App />

  </React.StrictMode>,

  document.getElementById(‘root’)

);

App.js

import React from ‘react’;

import “../node_modules/bootstrap/dist/css/bootstrap.min.css”;

const App = () => {

  return (

    <>

      <h1 className=’text-center text-danger text-capitalize my-5′>Hello World</h1>

      <div className=”container”>

        <div className=”row”>

      <div className=”col-sm”>

      <div class=”card”>

  <img src=”https://picsum.photos/200/301″ class=”card-img-top” alt=”…”

    height=”200px”

  />

  <div class=”card-body”>

    <h5 class=”card-title”>Card title</h5>

    <p class=”card-text”>Write the Text you want to show </p>

    <a href=”#” class=”btn btn-primary”>Go somewhere</a>

  </div>

</div>

      </div>

      <div className=”col-sm”>

      <div class=”card”>

  <img src=”https://picsum.photos/201/300″ class=”card-img-top” alt=”…”

    height=”200px”

  />

  <div class=”card-body”>

    <h5 class=”card-title”>Card title</h5>

    <p class=”card-text”>Write the Text you want to show</p>

    <a href=”#” class=”btn btn-primary”>Go somewhere</a>

  </div>

</div>

      </div>

      <div className=”col-sm”>

      <div class=”card”>

  <img src=”https://picsum.photos/200/300″ class=”card-img-top” alt=”…”

    height=”200px”

  />

  <div class=”card-body”>

    <h5 class=”card-title”>Card title</h5>

    <p class=”card-text”>Write the Text you want to show</p>

    <a href=”#” class=”btn btn-primary”>Go somewhere</a>

  </div>

</div>

    </div>

  </div>

</div>

    </>

  );

};

export default App;

Also Learn: How to Create a Digital Clock in React JS?

So this is all about the Bootstrap Installation, Extensions, and its Example. We hope that you understand How to Use Bootstrap 4 in React JS. Info At One tries to serve you the best react projects for beginners and will be helping you with more and more React JS programming examples in a much most straightforward way. So stay tuned for more programming posts.

Leave a Reply

Your email address will not be published.