Ninja Space Content Tech Blog

Utilizing React Bootstrap Library and What I Found Out for my First Time

Posted by Ninja Space Content on Saturday, February 20, 2021 Under: react
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:
  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:
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.

In : react 

Tags: bootstrap  react  node  express  pern 

About Ninja Space Content

Ninja Space Content I have been building simple websites on my own since 2008 and currently run several websites at the moment, including this one. I used to be an account manager for an affiliate/e-commerce company, helping affiliates grow their sales so I have some knowledge on the business side and client side of affiliate marketing. Most recently, I decided to complete a JavaScript coding bootcamp and graduated in Dec 2020.
Note: links to resources and promoting special deals may allow me to earn a small commission from each sale.
Work Station Accessories