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:
Right before the closing </body> tag, add the following scripts:
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
- Second, inside the <form> there is an <input> tag. The input tag needs to be self-closed: <input … />
That’s it.
Test to make sure that everything works (npm start). The dropdown and mobile menus should work as well.
Dino Cajic is currently the Head of IT at LSBio (LifeSpan BioSciences, Inc.), Absolute Antibody, Kerafast, Everest BioTech, Nordic MUbio and Exalpha. He also serves as the CEO at MyAutoSystem. He has over a decade of software engineering experience. He has a B.S. in Computer Science and a minor in Biology. His background consists of creating enterprise level e-commerce applications, performing research based software development, and facilitating the spread of knowledge through writing.
You can connect with him on LinkedIn, follow him on Instagram, or subscribe to his Medium publication.
