Customizing React-Bootstrap Components
Bootstrap helps you iterate quickly when building components and UI in an app by customizing the base components to make them suit the needs of the app.
Nov 4, 2020 • 4 Minute Read
Introduction
Building apps with Bootstrap helps you iterate quickly when building components and the user interface design of your app. This prevents you from reinventing the wheel every time you start a new project. All you need to do is customize the base components available to make them suit the needs of the app. This guide will demonstrate how to customize react-bootstrap components to suit your need.
Set Up react-bootstrap
To get started, run the following command in your terminal to set up your React project.
1. npx create-react-app <YOUR_APP_NAME>
2. cd <YOUR_APP_NAME>
3. yarn start or npm start
<YOUR_APP_NAME> refers the name you'd like to give to your React project.
If you really want to get started quickly without the pain of setting up a create-react-app project then open up your browser and visit https://react.new to get a fully configured React development environment via https://codesandbox.io.
Using Bootstrap
Bootstrap can be used in a few different ways:
- Downloading the Bootstrap production files
- Adding CDN links to your HTML file.
- Downloading via a package manager such as npm or yarn.
In this guide you'll install Bootstrap with a package manager and install the React Bootstrap library, which comes with React components that you can use easily.
Run the following command to install react-bootstrap.
npm install react-bootstrap bootstrap
OR
yarn add react-bootstrap bootstrap
React Bootstrap doesn't use a precise version of Bootstrap, but you'll need to add some default styling to use the components. Add the following line of code to your src/index.js or src/App.js file.
import 'bootstrap/dist/css/bootstrap.min.css'
Customizing a Card Component
Assuming you're building an e-commerce app, displaying a list of products would require a card component that contains details of the product. Luckily there's a card component that can be built upon to provide this functionality quickly.
First create the product card component.
import React from 'react';
import Card from 'react-bootstrap/Card';
import Button from 'react-bootstrap/Button';
function ProductCard({name, imgSrc, price,currency, ...props}){
return(
<Card style={{ width: '18rem' }}>
<Card.Img variant="top" src={imgSrc} />
<Card.Body>
<Card.Title>{name}</Card.Title>
<Card.Text>
{currency} {price}
</Card.Text>
<Button variant="success">Add to Cart</Button>
</Card.Body>
</Card>
)
}
export default ProductCard;
In the <ProductCard/> component above, you built upon the default card component in react-bootstrap and created a custom component.
Assuming you created the component in the components/ProductCard.js directory, you can use your custom component as shown below.
import React from 'react';
import ProductCard from './components/ProductCard';
function App(){
return(
<ProductCard name="Red Hoodie" price="90.00" currency="$" imgSrc="https://img.foo.com/logo.png"/>
)
}
export default App;
Custom Button Component
Now using the same procedure you used to create the card component, create a custom button that accepts an href attribute as shown in the snippet below.
import React from 'react';
import Card from 'react-bootstrap/Card';
import Button from 'react-bootstrap/Button';
function ButtonLink({text, link, ...props}){
return(
<Button href={link}>Link</Button> <Button type="submit">{text}</Button>
)
}
export default ButtonLink;
Conclusion
And voila! In this guide, you created a custom button and card component to help you build out your app faster. If you want to read more on react-bootstrap, visit the official documentation to learn more. Try as much as possible to try your hands on more examples to get a solid understanding. If you have any questions, feel free to ping me on Twitter @DesmondNyamador
