BodinglesTM - -   Bright Lightbulb Graphic Ideas   - -

Full Stack MERN Web Development

Back to Bootstrap Index

Bootstrap REACT "Download" Installation

Before you can install Bootstrap into React, you must have Node js installed on your system.

Got to Download Node js and install it.

To use Bootstrap with React, we are going to use a platform called Vite (pronounced veet)

Go to the Vite website "Getting Started" page.

    React Download Installation
  • Scroll down to the "Scaffolding Your First Vite Project" section
  • Under the NPM tab copy the command [npm create vite@latest]
  • in VS Code
    • rt. click on your website folder and select "Open In Integrated Terminal"
    • paste the command [npm create vite@latest] and press ENTER
  • We need to change the project name
    • hit [.] (period), and press ENTER
      • this will select the folder name you rt clicked on to open the terminal
    • select [React]
    • select [JavaScript]
    • then "INSTALL" by typing [npm i]
    • Run the project by typing [npm run dev]
      • This will start the project and display the localhost port number
  • *NOTE: at any time, while you are in the terminal, Enter clear to clear the current terminal screen.
  • Also, pressing ctrl + c will END the current process that is running in the terminal
    • closing the terminal also does a FORCED STOP
  • Also, at any time you want you want to run this process
    • rt. click on the folder name
    • start the terminal
    • use the [npm run dev] command
    So, you can start the application (process) at any time by
  • rt. click on the application < root> folder
  • Select Open in Integrated Terminal
  • in the terminal window either
    • copy the "localhost ip" and past it into your browser
    • or, ctrl/click the host ip to open it in the browser
    If you want to get rid of the default HTML/Js/CSS
  • in your < root> folder
    • In VS Code open src/App.jsx
      • Remove all of the "import's" at the top
      • Remove the const [count, setCount] = useState(0) line
      • remove everything between return ( <> and </> )
    • your code will be inserted here
    • In VS Code open src/index.css
      • remove everything to remove all styling
    Because this is a "Download" install, we still need to download the Js & CSS code.
  • Go to: Bootstrap Downloads to get the necessary files and links to make Bootstrap work.
  • This will download the CSS and JavaScript files into your website, for Bootstrap
    • in the "Compiled CSS and JS" section, click the download link
    • Extract the downloaded .zip file
    in the css folder,
  • copy the bootstrap.min.css file and paste it into your root/src/styles folder for your website
  • create a style link in the head of your website to link to this file
    • < link rel="stylesheet" href="src/styles/bootstrap.min.css">
    in the js folder,
  • copy the bootstrap.min.js file and paste it into your root/src/script folder for your website
  • create a javascript link in the body of your website to link to this file
    • < script src="src/script/bootstrap.min.js" ></script>
    • *note This must be below all other lines of code, right before the closing body tag.
  • *NOTE, you can also use the popper version of js as described here,
    • but you must use the link method to incorporate the popper version
    • just add the link code right above the min script in the body of you website.
    If you want to check the Bootstrap status and make sure everything is working;
  • rt. click on the webpage and select inspect
  • click the Network tab
  • refresh the page
  • in the list, look for
    • bootstrap.min.css
    • bootstrap.bundle.min.js
  • ensure it is showing 304 for both, which means everything loaded and everything is OK
    Now Install the React Component
  • go to the React Bootstrap page
    • The Components page shows all the React Bootstrap components you can utilize in your web application.
  • Click the Get Started button for install instructions
    • under the Installation section, copy the install script;
      • npm install react-bootstrap bootstrap
      • In VS Code, close all running processes in the terminal and run the script
    • Further down the page, in the CSS section,
      • copy the CSS Import script.
        • import 'bootstrap/dist/css/bootstrap.min.css';
      • as the instructions say,
        • The CSS Import script can be included in your src/index.js or App.js file
        • The class was using the App.js file so we will paste the CSS Import script into the first line of the file.
    to test the install
  • Go to the Components page
  • Pick a component, such as the Accordion component
    • Copy the code for the component
    • paste it into the bottom of the App.js file
      • below all other lines of code
    • In the App.js file,
      • change the function name and the export default name from BasicExample, to App

    • *Note make sure the App.js file contains the "Import" for the React-Bootstrap CSS | [ import "bootstrap/dist/css/bootstrap.min.css"; ]

Back to Top