Using pure Bootstrap in React

To start, I understand that React Bootstrap exists. I wanted to find the simplest way to use bootstrap in a React Application without React Bootstrap.

Let’s start by creating the react app with create-react-app so that we’re all on the same page. In public/index.html, we need to add some code. Right before the closing </head> tag, add the following CSS:

Image for post
Image for post

Right before the closing </body> tag, add the following scripts:

Image for post
Image for post

Save and close index.html. Open App.js and delete everything inside the return(). We’re going to be just adding a navigation there for testing. If you’re working on your own application, do not delete everything inside your return().

Navigate to the Bootstrap example page: https://getbootstrap.com/docs/4.0/examples/starter-template/

Right click on it and View Page Source. The <nav> tag starts right after the <body> tag. Copy everything inside <nav>…</nav>, including the <nav> tags themselves. Paste the content inside your return statement. There will be some changes that need to occur before we’re ready test.

  • First, change each class attribute to className

That’s it.

Image for post
Image for post

Test to make sure that everything works (npm start). The dropdown and mobile menus should work as well.

Image for post
Image for post
Image for post
Image for post

Written by

Author of An Illustrative Introduction to Algorithms. A Software Engineer with a B.S. in Computer Science, a minor in Biology, and a passion for learning.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store