Desmond Nyamador

Customizing React-Bootstrap Components

Desmond Nyamador

Nov 4, 2020
4 Min read
1,093 Views

Nov 4, 2020
4 Min read
1,093 Views

Web Development

Front End Web Development

Client-side Frameworks

React

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
2
3
4
5
1. npx create-react-app <YOUR_APP_NAME>

2. cd <YOUR_APP_NAME>

3. yarn start or npm start

bash

<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.

1
2
3
4
5
npm install react-bootstrap bootstrap

							OR

yarn add react-bootstrap bootstrap

bash

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.

1
import 'bootstrap/dist/css/bootstrap.min.css'

jsx

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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;

jsx

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.

1
2
3
4
5
6
7
8
9
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;

jsx

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.

1
2
3
4
5
6
7
8
9
10
11
12
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;

jsx

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

LEARN MORE