Open In App
Related Articles

How to add theme to your webpage using Bootswatch in ReactJS project ?

Improve Article
Save Article
Like Article

We can add an instant theme to the ReactJS project by using Bootswatch.

Bootswatch: It is an open-source project, that provides a number of free themes for bootstrap that a web developer can use. It helps the developer to get proper UI without spending hours and energy on styling different elements.


  1. ReactJS Introduction and Working
  2. ReactJS Setting up Development Environment

To start follow the given link. Scroll down a bit, the themes will appear. Some of the most used themes are cosmos, darkly.


Project structure: 

Installation of Bootswatch in ReactJS project:

  1. Click on the preview button to have a wider perspective of the different components like forms, dropdown, and others to see how these components will appear if we use this particular theme.
  2. After selecting the theme, click on the download button, to download the bootstrap.min.css file.
  3. Inside your react.js folder open terminal, write command, this will install react-bootstrap in your application.
npm install react-bootstrap bootstrap
  1. As an example we choose Cyborg or is the theme that is chosen. Now add the downloaded bootstrap.min.css file, in the src folder.
  2. Import the bootstrap.min.css file in index.js. Filename- index.js: Here we will just import the bootstrap.min.css. Now the theme is applicable to the entire application.


import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
// Import downloaded theme
import './bootstrap.min.css';
    <App />

  1. In the src folder create another folder Components and inside it create a file and name it as Home.js it will be our functional component.
  2. Create a functional component in the file, like below. Now add any bootstrap component in your react.js application and it will be styled according to the theme.

Filename- Home.js: 


import React from 'react';
import {Image , Row} from 'react-bootstrap';
const Home = () => {
    return (
            <h1>Welcome to GeeksforGeeks</h1>
            <h2>Let's Learn</h2>
            {/* aligning the image at the center */}
            <Row className="justify-content-md-center">
               <Image src=
                      roundedCircle fluid />
export default Home

  1. Now we just need to import the Home.js component in our App.js root component.

Filename- App.js: Remove the unnecessary things from this file and add the below code.


import './App.css';
// Importing Home component
import Home from './component/Home';
function App() {
  return (
    <div className="App">
      <Home />
export default App;

Start the Server: Run the below command to start the server.

npm start

Output: The applied theme is Cyborg (dark theme) and here is the output.

Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!

Last Updated : 25 Aug, 2022
Like Article
Save Article
Similar Reads
Complete Tutorials