How to add Bootstrap to your React app

When I started building projects and wanted to make them look good, I soon learned Bootstrap was an efficient way to style them. It's also pretty intuitive (which is a godsend).

Unfortunately, I got stuck at the first step: installing Bootstrap.

Hopefully this will save you from getting stuck at the installation too.

1. run $npm install bootstrap react-bootstrap in your React app's directory.

2. Now, it's time to ask yourself specifically what you want to style: buttons, the navbar, do you want to add cards? Browse through what bootstrap has to offer here: https://react-bootstrap.github.io/components/alerts/

3. Once you've perused through all the components Bootstrap has, and some have caught your eye, navigate to the file where you want to use them. Here, you'll import the specific component at the top of the file by writing: import { Component } from "react-bootstrap" (include the name of the component you want)
   Underneath that, include: import "bootstrap/dist/css/bootstrap.min.css";

4. Now you're free to include that component in your file.
   If you want to add different components, simply add them to the curly braces at the import at the top of the file:

import { Component1, Component2 } from "react-bootstrap"

Congrats! You've installed Bootstrap and included components in your app. Now, you can focus on styling the components to your preference.

... how do you do that?

The styling in Bootstrap is done primarily through the component's attributes. For example:

<Component variant="primary">

... will give you the pre-styled "primary" version of this component.

You can find these attributes and examples of what styles they offer in the "components" section of the Bootstrap docs we looked at before:
https://react-bootstrap.github.io/components/alerts/

Hope this helped. For a great tutorial on how to use basic Bootstrap components: https://www.youtube.com/watch?v=8pKjULHzs0s