While learning the basics of HTML and CSS through a Colt Steele Udemy course I was exposed to bootstrap for the first time. Bootstrap is a HTML, CSS and JS library to help you quickly design and customize resposive mobile-first sites. It’s based around a grid system which allows you to quickly layout the components of your web page through the use of a large pre-built component library and the ability to easily add your own custom touches.
Bootstrap definitely kept me interested in building websites at a time when styling and writing great CSS seemed like something that was going to take a long time to learn.
Fast forward to my current state as a programmer and I can say that CSS is definitely one of the toughest and most important pieces of development.
Adding basic styling and establishing your design early on in the process can be the difference between keeping on top of a project and getting overly frustrated and losing momentum.
As a React developer, being able to have a clean looking, working prototype allows me to work on more of the functionality specific to my project and gives me a sense of progress.
Enter react-bootstrap, the Bootstrap team’s npm package for injecting your React app with a healthy dose of the Bootstrap grid.
So What’s the Difference?
React-bootstrap has all the features you know and love about Bootstrap re-tuned for React applications. It features a rich component library with a lot of awesome funcationality right out of the box and can be used exclusively to provide the design and styling for your React application.
It also leaves plenty of work arounds for customizing the out-of-the-box components to your liking.
I’m going to provide some detail on only one of the many components available, so please make sure to seartch through the docs to see if there is a pre-built solution for whatever you are trying to tackle.
Use Cases
Protyping an idea quickly.
Getting something up and running is great to flesh out an idea and if you can do it in a way that has good UI you don’t have to work about the styling hindering your own (or your client’s) ability to see where you are going with the application.
Don’t Remake the Wheel
A lot of the pre-built components are going to give you the functionality you need for your app and are going to let you focus on building the pieces that are unique to your project. In short=> less time getting a working navbar and more time on the things that interest you about your application.
Easy to Understand
I’ve gotten some help with a few applications that use react-bootstrap from other developers (including those who aren’t familiar with Bootstrap) and they get up to speed very easily. It’s a library that is easy to pick up and leaves a high skill cap to mastery.
Let’s Check Something out
Cards
Card components are something that happens on a lot of sites. Any time you iterate through an array and need to render a number of similar looking components to the page you might use something like a card. Think about clickable Airbnb listings or scrolling through a selection of movies on Netflix.
Enter react-bootstrap
To get something like this into your prioject is as simple as an import statement (all components follow this same convention)
import Card from ‘react-bootstrap/Card
The card component has a few properties that easily allow you to manipulate the individual sections of the card. Let’s check out what we used above
<Card style={{ width: '18rem' }}>
<Card.Img variant="top" src="holder.js/100px180" />
<Card.Body>
<Card.Title>Card Title</Card.Title>
<Card.Text>
Some quick example text to build on the card title and make up the bulk of
the card's content.
</Card.Text>
<Button variant="primary">Go somewhere</Button>
</Card.Body>
</Card>Card represents the container ( read more about this Bootstrap concept here) holding all of the Card’s information.
Card.Img, you guessed it, is the img on the top of the card.
Card.Body is the container for the main body of the card
Card.Title renders a nice header to the main information in the Card.Body
Card.Text represents the main text component of the Card
Button (another Bootstrap import) to use as you see fit.
Just like that we can see how something like the Airbnb card could come to life if we were trying to recreate it with react-bootstrap
React-bootstrap has leveled up my React development game and I hope it can do the same for you. This is just a drop in the Boostrap ocean. Futher reading will show you how you can customize things to your liking, add a Theme, and combine components to get the exact look and feel for your app that you are looking for.
I hope you take the time to check out react-bootstrap and implement it in your next project.
Happy Hacking!
Resources
Connect with Me:
