Ninja Space Content Blog

Utilizing React Bootstrap Library and What I Missed the 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.

Two main things I missed when I first utilized React Bootstrap for my App were the following:

  1. Add
    import 'bootstrap/dist/css/bootstrap.min.css';
    to my main index.js to 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 will 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';
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 

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 coding bootcamp and have just graduated in Dec 2020.
Note: links to resources and promoting special deals may allow me to earn a commission from each sale.