BodinglesTM - -   Bright Lightbulb Graphic Ideas   - -

Full Stack MERN Web Development

Back to Bootstrap Index

Bootstrap REACT "CDN" 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 CDN 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 "CDN" install, we still need to link the Js & CSS code to our page, so we'll add the links to the index.html file in our < root> folder.
  • go to the bootstrap website
    • to get the CSS link
      • scroll down to the CDN via jsDelivr section
      • copy the bootstrap.min.css link
      • paste this into the head of index.html
    • to get the JavaScript link
      • copy the JavaScript link for the version you want (popper or vanilla)
      • paste this into the bottom of index.html, right before the closing < body> tag
        • *Note: if there is another JavaScript line already there, our line of code must be the last line before the closing body tag.
    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 200 for both, which means everything loaded and everything is OK

Back to Top