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:
