Tuesday, October 27, 2020
therichposts@gmail.com
Bootstrap 4.5JavascriptReactjs

How to bootstrap modal in Reactjs application?

How to bootstrap modal in Reactjs application

Hello to all, welcome again on therichpost.com. Today in this post, I am going to tell you, How to bootstrap modal in Reactjs application?

Bootstrap Modal Popup In React Application

Post Working:

Friends in this post, I am opening bootstrap modal popup on button click into my reactjs application so for this I have used bootstrap latest version, jQuery for bootstrap and also popper.js. For live working example please check above video.

For reactjs new comers, please check the below link:

Reactjs Basic Tutorials


Here is the working code snippet and please use carefully:

1. Firstly, we need fresh reactjs setup and for that, we need to run below commands into out terminal and also we should have latest node version installed on our system:

npx create-react-app reactproject

cd reactproject

npm start

 

2. Now we need to run below commands into our project terminal to get bootstrap and related modules into our reactjs application:

npm install bootstrap --save

npm install jquery --save

npm install popper.js --save

npm start //For start project again

 

 

3. Finally for the main output, we need to add below code into our projectname/src/App.json file or if you have fresh setup then you can replace projectname/src/App.js code with below code:

import React from 'react';

import './App.css';
//Modules for Modal POPUP
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.min.js';
import 'jquery/dist/jquery.min.js';
import 'popper.js/dist/umd/popper.min.js'

function App() {
  return (
    <div className="MainDiv">
    <div class="jumbotron text-center bg-sky">
        <h3>Reactjs</h3>
        
      </div>
      
      <div className="container">
         <button type="button" class="btn btn-primary mt-5 mb-5" data-toggle="modal" data-target="#myModal">
          Open modal
        </button>
<div class="modal" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">

     
      <div class="modal-header">
        <h4 class="modal-title">Modal Heading</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>

      
      <div class="modal-body">
        Modal body..
      </div>

     
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
      </div>

    </div>
  </div>
</div>
      </div>
      </div>
  );
}

export default App;

 

Now we are done guys. If you have any kind of query, suggestion or requirement then feel free to comment below.

Friends, I make post for basic understanding and you can follow my posts and apply according to your requirements. Please share your views if you like it or not because with this I can make it more helpful.

Jassa

Thanks

Ajay Malhotra
the authorAjay Malhotra
Hello to all. Welcome to therichpost.com. Myself Ajay Malhotra and I am freelance full stack developer. I love coding. I know Wordpress, Core php, Angularjs, Angular 2, Angular 6, Angular 7, Angular 8, Angular 9, Angular 10 Nodejs, laravel, Codeigniter, Shopify, Squarespace, Jquery, Google Map Api, Vuejs, Reactjs, Bigcommerce etc.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.