CSS is no joke. I recently spent 15 weeks in a coding bootcamp and have only now just begun to really dive into the world of styling. You'd think that this would probably be the easiest part of building a web page or app right?(I mean I know I did.) I was thinking it's just coloring things and moving them around around, can't be that hard right? However, CSS bugs can be just as tricky and elusive as bugs in JS. Enter bootstrap. Bootstrap is an HTML, CSS and JavaScript library that allows you to easily add styling to a project. I have the most experience with react-bootstrap so that is what I'll covering for you here quickly.
Getting Started
First off make sure you have a react-app running. If you're not sure how to do that, React has wonderful documentation and the tutorial is very helpful as well. You can find all of that here.
Alright so now that you have your react app started, you can begin to use react-bootstrap. First you will want to install the packages.
npm install react-bootstrap bootstrap
Entering the above command into your terminal will install both the bootstrap package as well the react-bootstrap package.
Importing
Once you have those packages installed into your package.json file you are ready to start using some bootstrap. In the component that you'd like to add some styling, you'll have to import the exact bootstrap component. Let's say I have a form in my app that I think just looks too boring for my taste. I can import the react-bootstrap Form component to give my form some style. Thinking ahead, we'll also probably want our form to have a submit button as well so let's import a button component along with our form component.
import Form from 'react-bootstrap/Form'
import Button from 'react-bootstrap/Button'
Note: You can also import any react-bootstrap components along with the entire react-bootstrap library by using the curly brace syntax shown below. The above import method is preferred however unless you need the whole bootstrap library for the component you are styling.
import { Form, Button } from 'react-bootstrap'
CSS File
Now that you have the components imported where you want them you'll just need to import the bootstrap css file at the top level of your project(App.js or index.js).
import 'bootstrap/dist/css/bootstrap.min.css'
Magic
Now that you have all of the imports, you have access to all of the magic of react-bootstrap. It will make your basic HTML form...
into a nicely styled react-bootstrap form!
So much better right!
React-bootstrap Docs
If you'd like to make your forms all pretty like the one above then I would suggest you visit the react-bootstrap docs page. The docs are wonderfully written and provide you with step-by-step instructions on how to incorporate react-bootstrap components into your project. In this blog I've only mentioned the Form and Button components in the react-bootstrap library and there are so many more! I myself have only begun to scratch the surface of bootstrap and can't wait for all the adventures to come.
Conclusion
I hope that I have convinced you to check out some react-bootstrap because it really is that cool. It helped me out a lot throughout my final project for my coding bootcamp and I know it will help any of you out there getting started!
Top comments (0)