Ninja Space Content Blog

I started learning JavaScript in July 2020 and had been using strictly CSS to style my own apps but I've decided to take a stab at bootstrap with React Bootstrap. There's a learning curve and at first, I thought, it'd just be faster if I style all of this myself with CSS. However, I know that in a lot of job descriptions, bootstrap comes up in the tech stack as a preferred skill to have. After working with it, I realized, it could save me a lot of time making sure everything is formatted correctly if I am focusing on just functionality. Here's what I learned and some tips from my personal development.

Things to make sure not to miss when utilizing React Bootstrap for my App were the following:

1. Add

   import 'bootstrap/dist/css/bootstrap.min.css';

   to my main index.js of my src folder.
2. Then, import the individual components in the files that I am utilizing the React Bootstrap for. For instance, if I am using the Form component and the Button within that Form, I would need to import both Form and Button. Just importing Form will throw an error if you're also utilizing the Button as well inside of it. To show an example, these are what I imported at the top:

   import Button from 'react-bootstrap/Button';
   import Form from 'react-bootstrap/Form';

3. Instead of using the Nav feature, using an Accordion is a good option. To read more about the Accordion component you can use from React Bootstrap, go to: https://react-bootstrap.github.io/components/accordion/
4. I really like using the Carousel component from React Boostrap. It is so easy to use and makes it easy to add something interactive that makes the design of your page more exciting. See Carousel options here: https://react-bootstrap.github.io/components/carousel/

After you're set up and ready to implement whichever code you're interested in within the list of react bootstrap components, take note of the variants as this will allow you to utilized their existing list of styles. As default, the buttons are blue but you can change this if you input the appropriate variant you'd like to use.