React FAQ - Bootstrap

To use Bootstrap with React JS, first include raw CSS Bootstrap files with React JS. React is the most popular JS framework for building dynamic web apps. It does not, however, give us ways to create responsive and intuitive designs because it is a view library. To overcome this, we can use Bootstrap, a front-end design framework.

1. Create a new default Create React App project in your system using the following command.

   
   

   npx create-react-app my-project-sample
    

2. This command creates the base template project. To create the project using other available templates, execute the following command.
   

   npx create-react-app my-project -sample–template [template-name]

3. Run the new project and navigate it using the following command.
   

    cd my-project-sample

   
   

4. Start npm using npm start.

   
   

5. Link the Bootstrap stylesheet to ReactJS

   
   

6. Install Bootstrap using the following command.

   
   

   npm install bootstrap
   
   Include the following code in your src file.
   
   import “bootstrap/dist/bootstrap.min.css”;
   After successfully integrating the Bootstrap stylesheet into a React project, you can now use Bootstrap classes with ReactJS code.
    Permalink