Intro to React-Bootstrap

Wanting to use grid systems and navbars in a personal website I was building, I decided to install react-bootstrap, a node module that loads in bootstrap features via individual React components.

Installing was slightly different than normal, in that, though you still run npm install react-bootstrap --save, you must also install the bootstrap css. This is because there is no standard bootstrap theme that everyone uses, and so rather than loading a default theme that takes up space or you have to delete, the developers decided it would be best if each person using react-bootstrap downloaded the css they wanted from the start. While you can link to bootstrap css from your index.html file or import bootstrap css into your index.css file, as you would in a non-React app, I found it easier to run npm install bootstrap --save , installing bootstrap globally as a node module. After this, you just import into your index.js file:

import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/css/bootstrap-theme.css';

Now you can start using react-bootstrap!

After skimming through all of the documentation, I decided to first integrate the <Grid /> component in my main App.js, to provide the basic page structure. Thankfully, the documentation was extremely helpful in figuring out how to do so. To create a NavBar and About me section, for instance, I wrote:

<Grid>
  <Row> 
    <Col md={4}>
      <NavBar />
    </Col>
    <Col md={8}>
      <About />
    </Col>
  </Row>
</Grid>

One “issue” I ran into was that, if you have the dev console open on either the left or right side of your screen, even just a little, it will push the last column (here, <About />) to the next row, making it seem as if it’s not working. A minor issue that most people will overlook, but it drove me crazy.

Working with this grid system now, you can use any other modules with it. I used Routes, for instance, so my App.js looked like:

<HashRouter>
  <Grid>
    <Row>
      <Col md={4}>
        <Route path='/' component={NavBar} />
      </Col>
      <Col md={8}>
        <Route path='/about' component={About} />
        <Route path='/projects' component={Projects} />
     </Col>
    </Row>
  </Grid>
</HashRouter>

This allows me to always have <NavBar /> on the left side of my screen and then, depending on whether the user is on /about or /projects, to have that respective component on the right side of the screen.

You can now look through the remaining Bootstrap components, and insert them into your project wherever you need them!