How to create your own React Bootstrap theme ?

In this article, we will learn how to create our own react-bootstrap theme on a website Themestr.app and add it to our react project.

Features:

• No need to think about responsiveness.
• A wide range of color options is available to choose from.
• Very easy to work and integrate into the project.

Prerequisite:

• ReactJS Introduction and Working
• ReactJS Setting up Development Environment

Creating React Application and installing Bootstrap:

Step 1: Create a React application using the following command.

npx create-react-app project

Step 2: After creating your project folder(i.e. project), move to it by using the following command.

cd project

Step 3: Now install react-bootstrap in your working directory i.e project

npm install react-bootstrap bootstrap

Follow The Steps to create your own bootstrap theme:

Step 1: Follow the link to the website: https://themestr.app/ and click on the Start Here button on the website.

Step 2: After that a page with title UI Kit Builder will open and in this page you have to choose the color palette for your theme and after selecting click on next button.

Step 3: Now on this page we have to select a font for our theme and after selecting we click on next.

Step 4: Now we have options to choose to style, after choosing it to move to the next.

Step 5:  At last we will choose icons and after choosing icons we click on preview button.

Step 6: In this step, we can change the colors, change the font-size, we can disable or enable properties of the elements, and many more.

Step 7: After customizing scroll at the end of the website and download the CSS file

Add the downloaded file to your project directory and then import it in your App.js. 

Example: In this example, we have customized a basic theme with Color Palette named Bootstrap 5 (Default) then after that chose font Bungee Shade, kept more options to the default selected the first set of icons, then click on preview, this shows all the components that you have selected you can further customize in this page like change in colors. We have opted for the following colors:

 Primary as #53565A, Secondary :  #3DF5D6, Success #19AE32,Danger #862831,Info #09076E,Warning #FFC629,Light #CFE3F7,Dark #21084F

Add the downloaded CSS file to the project directory in the src folder and rename it, we are renaming as theme.css.

In the App.js file we are importing button component from react-bootstrap. We are creating seven buttons with variants like secondary, success, warning, danger, info, light, dark that will show the colors that we have chosen for the theme we have created.

App.js

import './theme.css';
// Importing from react-bootstrap
import { Button } from 'react-bootstrap'
function App() {
    return (
        <div className="App">
            <header>
                <h1>Colors According the customize theme</h1>
                <Button variant="secondary">Secondary</Button>
                <Button variant="success">Success</Button>
                <Button variant="warning">Warning</Button>
                <Button variant="danger">Danger</Button> 
                <Button variant="info">Info</Button>
                <Button variant="light">Light</Button> 
                <Button variant="dark">Dark</Button>
            </header>
        </div>
    );
}

export default App;

Step to Run Application: Run the application using the following command from the root directory of the project.

npm start

Output: