Skip to content
Related Articles

Related Articles

How to create your own React Bootstrap theme ?

View Discussion
Improve Article
Save Article
  • Last Updated : 17 Feb, 2022
View Discussion
Improve Article
Save Article

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:

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

Initial File Structure

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

After adding 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

Javascript




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:


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!